Forem: Umesh Verma

Create a grid view in iOS using Swift.

Umesh Verma — Wed, 20 Jan 2021 06:46:02 +0000

We will see how to achieve the grid layout by using the `collection view`.

Let's create a starter project from Xcode.
go to File -> New -> Project

Now select app then clicks on next and add your project name then create.

Next open the Main.storyboard and add a collection view in your view controller.

Add the required constraints to this collection-view.

Next select the collection view and set min spacing for cell and line both from the default value to 0 because we will set it from code.

Now jump to the ViewController, and add an IBOutlet connection from the storyboard collection view to this view controller.



import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var gridCollectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setUpCollectionView()
    }
}

Let's do some modification to the collection view



private func setUpCollectionView() {
     /// 1   
     gridCollectionView
            .register(UICollectionViewCell.self, 
             forCellWithReuseIdentifier: "cell")

     /// 2
     gridCollectionView.delegate = self
     gridCollectionView.dataSource = self

     /// 3
     let layout = UICollectionViewFlowLayout()
     layout.scrollDirection = .vertical
     /// 4
     layout.minimumLineSpacing = 8
     /// 5
     layout.minimumInteritemSpacing = 4

     /// 6
     gridCollectionView
           .setCollectionViewLayout(layout, animated: true)
   }

Register a default cell for collection view.
Set the delegate actions to the current view controller.
Create a custom flow layout for this.
Set a minimum line spacing with your padding
Set the minimum interim-item spacing half of the line-spacing.
Set this custom layout to the collection view.

Next add the data source to the current view controller.


 swift
extension ViewController: UICollectionViewDataSource {
    /// 1
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    /// 2
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        /// 3
        cell.backgroundColor = .randomColor()
        return cell
    }
}

Set the number of items in the collection view. We didn't add the number of sections so it will assign the default value to 1
dequeueReusableCell with the given cell identifier from setupCollectionView method.
Setting the background color with a Random Color.

Now let's assign the delegate



extension ViewController: UICollectionViewDelegateFlowLayout {
    /// 1
    func collectionView(_ collectionView: UICollectionView, 
                  layout collectionViewLayout: UICollectionViewLayout,
                  insetForSectionAt section: Int) -> UIEdgeInsets {
        /// 2
        return UIEdgeInsets(top: 1.0, left: 8.0, bottom: 1.0, right: 8.0)
    }

    /// 3
    func collectionView(_ collectionView: UICollectionView,
                   layout collectionViewLayout: UICollectionViewLayout,
                   sizeForItemAt indexPath: IndexPath) -> CGSize {
        /// 4
        let lay = collectionViewLayout as! UICollectionViewFlowLayout
        /// 5
        let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
        /// 6
        return CGSize(width: widthPerItem - 8, height: 250)
    }
}

First add the insetForSectionAt from UICollectionViewDelegateFlowLayout.
Add the inset for collection view sections. I added left and right space 8 because I need to match the minimum line spacing between the cells.
Add to assign the size for the cell so added the method from UICollectionViewDelegateFlowLayout
Get the assigned layout from the collection view.
distribute the width of cells.
Return the size of each cell but make sure it should be less of line spacing.

Bonus: 🤔 How to create random colors?

💡 Use these extensions for creating the random colors.



/// Extension for random value get.
extension CGFloat {
    static func randomValue() -> CGFloat {
        return CGFloat(arc4random()) / CGFloat(UInt32.max)
    }
}
/// Extension for random color using random value.
extension UIColor {
    static func randomColor() -> UIColor {
        return UIColor(
           red:   .randomValue(),
           green: .randomValue(),
           blue:  .randomValue(),
           alpha: 1.0
        )
    }
}

Create a Dot Navigation Component in React with Typescript.

Umesh Verma — Sat, 16 Jan 2021 12:59:13 +0000

In this Content, we will see how to develop a component in react.

Installation

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

After installation is done, open this project in your Code Editor, I prefer to use VSCode.

For styling component I am using styled-component.

yarn add styled-components
yarn add @types/styled-components

Next Step

Create a tsx file in your src folder named DotNavigation.tsx

export const DotNavigation = () => {
  return (
    <div>

    </div>
  );
}

the above Component will be responsible for handling the all dots.

🤔 How can I add circular dots?

💡 let me create a new styled component.

///1
import styled from "styled-components";

///2
export const Dots = styled.button`
  /// 3
  outline: none;
  border: none;
  width: 20px;
  height: 20px;
  margin: 8px;
  border-radius: 50%;
`;

First import styled from styled-components package.
Create a constant for creating dots.
Adding some css properties to the Dot

Lets use these dots in DotNavigation component.

export const DotNavigation = () => {
  return (
    <div>
      <Dots />
    </div>
  );
}

The above snippet will creating only single circle with default background.

Let's add more feature on Dots.

///1
interface IDotState {
  active: boolean;
}

///2
export const Dots = styled.button<IDotState>`
  ....

  ///3
  background: ${(props: IDotState) => 
                (props.active ? "blue" : "gray")};
`;

Created a custom prop interface with a bool value that will track the current dot is selected or not.
Pass the Props type in the Dots component.
Set the background color based on the *active props* state.

Now use this prop in DotNavigation.

export const DotNavigation = () => {
  return (
    <div>
      <Dots/>
      <Dots active/>
    </div>
  );
}

Next Step is add more dots:

export const DotNavigation = () => {

  /// 1
  const count = 3; 

  /// 2
  const data: Array<{ id: string }> = [];

  /// 3
  for (let index = 0; index < count; index++) {
    const object = {
      id: index.toString()
    };

    /// 4
    data.push(object);
  }

  /// 5
  const [activeDot, setActiveDot] = React.useState(0);

  return (
    <div>
      /// 6
      {data.map((item, i) => (
        <Dots
          /// 7
          onClick={() => { setActiveDot(i) }}
          /// 8
          active={i === activeDot}
          key={i.toString()}
        />
      ))}
    </div>
  );
}

Set the total count of Dots that want to display.
Initialize a data array.
Iterating the loop for array creation.
Pushing each element in the array.
Using hooks to track the current dot element.
Iteration and creating the Dots in react render.
Addin onclick of each Dots so that will track the selected dots.
Set the current dot activated.

🎉 It's working !!!

Many thanks for reading this content.
Umesh

Use multiple interfaces/types as Props in react with typescript.

Umesh Verma — Fri, 15 Jan 2021 08:57:11 +0000

While developing the react component, with respect to class and functional component. The main concern while developing is to pass props inside so that it will be ready to use in projects.

React functional component

const CustomComponent = () => {
   return(<>.....</>);
}

🤔 How to pass my props inside the component?

💡 Let me create an interface for this component that will accept n number of props inside. so that it can be more customize.

Custom Props interface

interface ICustomComponentProps {
   height: number;
   width: number;
}

Now using these props into the component.

const CustomComponent = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}

Now props are accessible in the component.

Now I need to create more components.

const CustomComponentB = () => {
   return(<>.....</>);
}

Let me pass the same props inside CustomComponentB.

const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}

Suddenly I realized that I need to add one more property to the above CustomComponentB.

🤔 How can I add one more property?

💡 let me add in the current interface.

interface ICustomComponentProps {
   ....
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

Cool it's working, but suddenly CustomComponentA is failing.😞

🤔 How to fix it?

Let me create another interface that will extend the ICustomComponentProps

interface INewComponentPropsB extends ICustomComponentProps {
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: INewComponentPropsB) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

Here ComponentB is using INewComponent props that extend the initial props interface.

Cool it's working,

🤔 How to fix it without using extends keyword?

💡 use the &

Let me modify interface

interface INewComponentPropsB {
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: (ICustomComponentProps 
                                 & INewComponentPropsB)) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

🎉 It's working !!!

Many Thanks for Reading this content.

Bonus: You can use type definitions also instead of interface declartion.

Pass Props to CSS in styled-components with typescript.

Umesh Verma — Fri, 15 Jan 2021 06:31:37 +0000

CSS styling is important to customize any react component. So styled-component is a very good library for starting.

const Container = styled.div`
  ${css`
    width: 240px;
  `}
`;

use the above container in the React component.

return(
  <Container>
    Hello World!
  </Container>
)

🤔 How to pass my custom width inside the container?

Thinking and Googling.......

💡 Let me create a Type definition with width prop.

type ContainerType = {
  width?: number; ///Passing Optional Props
};

🤔 Now how can I use it in container?

const Container = styled.div<ContainerType>`
  ${css`
    width: ${(props: ContainerType) =>
      props.width !== undefined ? props.width + "px" : 240px};
  `}
`;

Now again render in React

return(
  <Container width={300}>
    Hello World!
  </Container>
)

🎉 It's working !!!

Many Thanks for Reading this small content.

Forem: Umesh Verma

Create a grid view in iOS using Swift.

We will see how to achieve the grid layout by using the collection view.

Add the required constraints to this collection-view.

Next select the collection view and set min spacing for cell and line both from the default value to 0 because we will set it from code.

Now jump to the ViewController, and add an IBOutlet connection from the storyboard collection view to this view controller.

Let's do some modification to the collection view

Next add the data source to the current view controller.

Now let's assign the delegate

Create a Dot Navigation Component in React with Typescript.

In this Content, we will see how to develop a component in react.

Installation

Next Step

Use multiple interfaces/types as Props in react with typescript.

While developing the react component, with respect to class and functional component. The main concern while developing is to pass props inside so that it will be ready to use in projects.

Suddenly I realized that I need to add one more property to the above CustomComponentB.

Pass Props to CSS in styled-components with typescript.

We will see how to achieve the grid layout by using the `collection view`.