همیار اندروید
همیار اندروید
همیار اندروید
نه
بله
منوی وبسایت
حساب کاربری

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

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

منوی وبسایت
حساب کاربری

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

آموزش کار با کارد ویو همراه با گرید لایوت  CardView With GridLayout در برنامه نویسی اندروید
نوع هزینه
شرکت کنندگان
دریافت دسترسی
مشخصات این آموزش
موضوعات مرتبط
زبان برنامه‌نویسی
Java   ,   XML
نوع قسمت‌ها
محتوای ارائه شده
متن   ,   تصویر
مهارت های مورد نیاز
وضعیت انتشار
سطح آموزش
آخرین آپدیت
یادگیری این آموزش

به نام خدا 

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

در این جلسه از آموزش میخام که با هم 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/t178
لینک کوتاه این آموزش برای انتشار در شبکه های اجتماعی
نظرات این آموزش
ابتدا باید وارد حساب کاربری خود شوید ، تا بتوانید برای این آموزش نظری ارسال کنید
هنوز نظری برای این آموزش ثبت نشده است
کپی برداری از محتوا و دیگر منابع اختصاصی به هر نحو غیر مجاز است. حتی با ذکر منبع. در صورت تخلف پیگرد قانونی به همراه خواهد داشت.
Copyright © 2020 , www.HamyarRoid.com , www.HamyarAndroid.com , Terms , Sitemap
همیار اندروید توسط سون هاست میزبانی می شود و دارای ترافیک نیم بها می باشد
خلـــق هـمیـار انـدرویــد با
logo-samandehi