آموزش کار با کارد ویو همراه با گرید لایوت CardView With GridLayout در برنامه نویسی اندروید

به نام خدا 

با سلام خدمت دوستان عزیزم

در این جلسه از آموزش میخام که با هم CardView رو کار کنیم

البته کارد ویویی که میخام با هم کار کنیم همراه با GridLayout هستش 

خب آموزش به این صورت هستش که من قسمت به قسمت پیش میرم و قسمت های تکمیل شده را به پروژه اضافه میکنیم

و همراه با اضافه کردن قسمت ها اون رو هم توضح میدم که هم آموزش خسته کننده نباشه و هم واستون جذاب باشه و این رو هم بگم

اگر در بخشی از CardView مشکل دارین میتونید فقط از کد نهایی که در انتهای آموزش هست استفاده کنید

خب میرم سراغ آموزش

قدم اول

اضافه کردن کتابخانه CardView در قسمت گریدل

implementation 'androidx.cardview:cardview:1.0.0'

قدم دوم

ابتدا در قسمت activity_main  طرح بندی صفحه را به صورت LinearLayout در میاریم

و به اون بک گراند می دیم و ...

مانند کد زیر

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">

    

</LinearLayout>

قدم سوم

من میام و درون کد بالا یک LinearLayout اضافه میکنم و درون اون یک TextView قرار میدم مانند کد زیر

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HamyarAndroid.com"
            android:textColor="#1B0309"
            android:textSize="30sp"/>

    </LinearLayout>


</LinearLayout>

که خروجی کد بالا رو می تونید در پایین ببینید

قدم چهارم

در این مرحله من میام و یک GridLayout به پروژم اضافه می کنم

مانند کد زیر

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HamyarAndroid.com"
            android:textColor="#1B0309"
            android:textSize="30sp"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"/>

    </LinearLayout>


    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8"
        android:alignmentMode="alignMargins"
        android:padding="14dp"
        android:columnCount="2"
        android:rowCount="3">
    </GridLayout>


</LinearLayout>

همانطور که در بالا می بینید من GridLayot را اضافه کردم

و ارتفاع اون رو صفر قرار دادم و بهش وزن یک دادم تا باقی مانده صفحه رو برای من پوشش بده

و براش دو ستون و سه تا سطر قرار دادم

قدم پنجم

اضافه کردن CardView در داخل GridLayot مانند کد زیر

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HamyarAndroid.com"
            android:textColor="#1B0309"
            android:textSize="30sp"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"/>

    </LinearLayout>


    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:alignmentMode="alignMargins"
        android:padding="14dp"
        android:columnCount="2"
        android:rowCount="3">



        <androidx.cardview.widget.CardView

            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

        </androidx.cardview.widget.CardView>


    </GridLayout>


</LinearLayout>

همان طور که میبینید من CardView  رو اضافه کردم

عرض و رتفاعش رو صفر قرار دادم

خط های 42 و 43

در سطر و ستون بهش وزن یک دادم تا به اندازه جاهای خالی که در سطر و ستون

دارد بزرگ بشه یا به زبان ساده تر جاهای خالی در سطر و ستون رو پوشش بده

خط های 44 تا 46

از سه طرف بهش فاصله یا مارجین دادم

خط 47

به گوشه CardView قوس دادم

خروجی کد بالا رو میتونید در پایین ببینید

قدم ششم

در این مرحله من میام درون CardView ایجاد شده در بالا یک LinearLayout ایجاد میکنم 

و درون اون یک ImageView و یک TextView اضافه میکنم مانند کد زیر

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HamyarAndroid.com"
            android:textColor="#1B0309"
            android:textSize="30sp"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"/>

    </LinearLayout>


    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:alignmentMode="alignMargins"
        android:padding="14dp"
        android:columnCount="2"
        android:rowCount="3">



        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_call_black_24dp"
                    android:id="@+id/view1"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="call"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>


        </androidx.cardview.widget.CardView>

    </GridLayout>


</LinearLayout>

توجه داشته باشین که من درون ImageView یک آیکون از درون خود سیستم ست کردم

خروجی کد بالا رو می تونید در پایین ببینید

قدم هفتم

در این مرحله من میام و از CardView ایجاد شده به اندازه نیاز خودم کپی میکنم

که من کلا شش عدد CardView میخام و اون ها رو مطابق با کد بالا کپی می کنم

و دوباره میگم که من از Icon های سیستم استفاده کردم و شما هم می تونید همین کار را بکنید

یا اینکه خودتون بستگی به سلیقه خودتون عکس به Drawable اضافه کنید و از اون ها استفاده کنید

کد نهایی پروژه به صورت زیر هست

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9A9F9F"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="HamyarAndroid.com"
            android:textColor="#1B0309"
            android:textSize="30sp"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"/>

    </LinearLayout>


    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:alignmentMode="alignMargins"
        android:padding="14dp"
        android:columnCount="2"
        android:rowCount="3">



        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_call_black_24dp"
                    android:id="@+id/view1"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="call"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>


        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_call_end_black_24dp"
                    android:id="@+id/view2"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="end_call"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>


        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_mail_black_24dp"
                    android:id="@+id/view3"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="mail"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>


        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_message_black_24dp"
                    android:id="@+id/view4"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="message"
                    android:textAlignment="center"
                    android:textColor="#0B0A0A"
                    android:textSize="18sp" />
                
            </LinearLayout>

        </androidx.cardview.widget.CardView>
        

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_settings_black_24dp"
                    android:id="@+id/view5"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="setting"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>


        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="16dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_contact_mail_black_24dp"
                    android:id="@+id/view6"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="contact"
                    android:textColor="#0B0A0A"
                    android:textAlignment="center"
                    android:textSize="18sp" />


            </LinearLayout>
            
        </androidx.cardview.widget.CardView>
        
    </GridLayout>


</LinearLayout>

من در GrideLayout همانطور که می بینید شش تا CardView جا گذاری کردم

تصویر نهایی پروژه رو میتونید در پایین ببینید

در نهایت اگر خواستید با کلیک زدن روی هر کدام از تصویرهای بالا کاری واستون انجام بشه

به اونها خاصیت کلیک خوری بدین

که یک نمونه از اون رو میتونید در پایین ببینید

MainActivity.java

package com.hamyarandroid.cardview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    ImageView view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view = findViewById(R.id.view1);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"شما تلفن را درخواست کردین",Toast.LENGTH_LONG).show();
            }
        });


    }
}

خروجی کد بالا رو می تونید در پایین ببینید

امیدوارم که از این آموزش استفاده مفید رو ببرید

تا آموزش بعدی خدا نگهدارتون

موفق و پیروز و سربلند باشید