همیار اندروید
همیار اندروید
همیار اندروید
همیار اندروید
نه
بله
منوی وبسایت
جستجوی پیشرفته صفحه اصلی اپلیکیشن های ما
حساب کاربری
منوی وبسایت
حساب کاربری

همیار اندروید

مرجــع تخصـصــی توسـعــه انــدرویــد

منوی وبسایت
جستجوی پیشرفته اپلیکیشن های ما
حساب کاربری
صفحه اصلی
آموزش
آموزش کار با کارد ویو همرا ...

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

آموزش کار با کارد ویو همراه با گرید لایوت  CardView With GridLayout در برنامه نویسی اندروید
مشخصات این آموزش
موضوعات مرتبط
نامشخص
زبان برنامه‌نویسی
Java  ,  XML
نوع قسمت‌ها
مبحث تک قسمتی
محتوای ارائه شده
متن  ,  تصویر
مهارت های مورد نیاز
Android Studio
وضعیت انتشار
به پایان رسیده
سطح آموزش
مبتدی
انتشار
1399-02-25 , 11:58
آخرین آپدیت
1399-02-25 , 13:10
یادگیری این آموزش

به نام خدا 

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

در این جلسه از آموزش میخام که با هم 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();
            }
        });


    }
}

 

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

 

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

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

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

HRoid.ir/tutorial178
لینک کوتاه این آموزش برای انتشار در شبکه های اجتماعی

کپی برداری از محتوا و دیگر منابع اختصاصی به هر نحو غیر مجاز است. حتی با ذکر منبع. در صورت تخلف پیگرد قانونی به همراه خواهد داشت.
Copyright © 2021 , www.HamyarAndroid.com , AboutUs , TeamUs , ContactUs , TermsUs , Sitemap
خلـــق هـمیـار انـدرویــد با
logo-samandehi