طراحی متریال دیزاین Recyclerview افقی در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش طراحی متریال دیزاین Recyclerview افقی در اندروید می پردازیم شاید بپرسید Recyclerview افقی دیگر چیست اگر برنامه Google Play را مشاهده کرده باشید می بینید که اپلیکیشن ها در card به صورت کنار هم (افقی) چیده شده است در ادامه می توانید پیش نمایشی از این طراحی متریال دیزاین را مشاهده کنید با ما همراه باشید.

این طراحی فوق العاده متریال دیزاین است و سعی شده تا شبیه به Google play طراحی شود.

ابتدا باید کتاب خانه های RecyvlerView و CardView را به پروژه اضافه کنید.
برای اینکار وارد فایل Build.gradle از نوع Module شده سپس در بخش dependencies خط های زیر را اضافه کنید.

compile 'com.android.support:recyclerview-v7:24.0.0'
compile 'com.android.support:cardview-v7:24.0.0'

1 2	compile 'com.android.support:recyclerview-v7:24.0.0' compile 'com.android.support:cardview-v7:24.0.0'

پروژه را sync کنید.
باید یک کلاس model به نام Fruit.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
public class Fruit {
    String cardName;
    int imageResourceId;
    int isfav;
    int isturned;
    public int getIsturned() {
        return isturned;
    }
    public void setIsturned(int isturned) {
        this.isturned = isturned;
    }
    public int getIsfav() {
        return isfav;
    }
    public void setIsfav(int isfav) {
        this.isfav = isfav;
    }
    public String getCardName() {
        return cardName;
    }
    public void setCardName(String cardName) {
        this.cardName = cardName;
    }
    public int getImageResourceId() {
        return imageResourceId;
    }
    public void setImageResourceId(int imageResourceId) {
        this.imageResourceId = imageResourceId;
    }
}

package ir.programchi;

public class Fruit {

String cardName;

int imageResourceId;

int isfav;

int isturned;

public int getIsturned() {

return isturned;

}

public void setIsturned(int isturned) {

this.isturned = isturned;

}

public int getIsfav() {

return isfav;

}

public void setIsfav(int isfav) {

this.isfav = isfav;

}

public String getCardName() {

return cardName;

}

public void setCardName(String cardName) {

this.cardName = cardName;

}

public int getImageResourceId() {

return imageResourceId;

}

public void setImageResourceId(int imageResourceId) {

this.imageResourceId = imageResourceId;

}

کد بالا به getter و setter نیز معروف است.
یک فایل فرگمنت به نام fragment_card.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"

xmlns:tools="https://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView

android:id="@+id/cardView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</RelativeLayout>

در بالا RecyclerView قرار داده ایم تا آیتم ها در آن Render شود.
یک فایل به نام recycle_items.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<android.support.v7.widget.CardView
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:card_view="https://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="4dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/card_height"
        android:orientation="vertical"
        android:weightSum="4">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="3.2"
            android:orientation="vertical">
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal">
                <ImageView
                    android:id="@+id/coverImageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|bottom"
                  android:background="@android:drawable/screen_background_dark_transparent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/titleTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="16dp"
                        android:textSize="@dimen/text_size"
                        android:textColor="#FFFFFF"
                        android:textStyle="bold"/>
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="0.8"
            android:gravity="center|right"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/likeImageView"
                android:layout_width="@dimen/icon_width"
                android:layout_height="@dimen/icon_height"
                android:padding="@dimen/icon_padding"
                android:src="@drawable/ic_like" />
            <ImageView
                android:id="@+id/shareImageView"
                android:layout_width="@dimen/icon_width"
                android:layout_height="@dimen/icon_height"
                android:padding="@dimen/icon_padding"
                android:src="@drawable/ic_share" />
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView

xmlns:android="https://schemas.android.com/apk/res/android"

xmlns:card_view="https://schemas.android.com/apk/res-auto"

android:id="@+id/card_view"

android:layout_width="120dp"

android:layout_height="wrap_content"

android:layout_margin="5dp"

card_view:cardCornerRadius="4dp">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="@dimen/card_height"

android:orientation="vertical"

android:weightSum="4">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="0dip"

android:layout_weight="3.2"

android:orientation="vertical">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center_horizontal">

<ImageView

android:id="@+id/coverImageView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center"

android:scaleType="centerCrop"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="left|bottom"

android:background="@android:drawable/screen_background_dark_transparent"

android:orientation="vertical">

<TextView

android:id="@+id/titleTextView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="16dp"

android:textSize="@dimen/text_size"

android:textColor="#FFFFFF"

android:textStyle="bold"/>

</LinearLayout>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="0dip"

android:layout_weight="0.8"

android:gravity="center|right"

android:orientation="horizontal">

<ImageView

android:id="@+id/likeImageView"

android:layout_width="@dimen/icon_width"

android:layout_height="@dimen/icon_height"

android:padding="@dimen/icon_padding"

android:src="@drawable/ic_like" />

<ImageView

android:id="@+id/shareImageView"

android:layout_width="@dimen/icon_width"

android:layout_height="@dimen/icon_height"

android:padding="@dimen/icon_padding"

android:src="@drawable/ic_share" />

</LinearLayout>

</android.support.v7.widget.CardView>

کد بالا شکل ظاهری هر آیتم که در RecyclerView قرار می گیرد را تنظیم می کند. در بالا یکسری از کدها برای شما خطا می دهد نگران نباشید.
یک فایل به نام dimens.xml در پوشه res/values ایجاد کرده و کدهای زیر را در آن قرار دهید.

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
	<dimen name="activity_vertical_margin">16dp</dimen>
	<dimen name="activity_right_margin">10dp</dimen>
	<dimen name="activity_left_margin">10dp</dimen>
	<dimen name="icon_width">60dip</dimen>
	<dimen name="icon_height">60dip</dimen>
	<dimen name="icon_padding">4dp</dimen>
	<dimen name="card_height">250dip</dimen>
	<dimen name="text_size">18sp</dimen>
</resources>

</resources>

در پروژه یکسری عکس استفاده شده است در زیر فایل را دانلود کرده و درپوشه drawable قرار دهید.
لینک دانلود
در پوشه drawable یک فایل به نام divider.xml ایجا کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="2dp" android:height="1dp" />
    <solid android:color="#999999" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

</shape>

یک فایل جاوا به نام HorizontalListViewFragment.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
/**
 * Created by Jefferson on 11/4/16.
 */
import android.content.ContentResolver;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class HorizontalListViewFragment extends Fragment {
    ArrayList<Fruit> listitems = new ArrayList<>();
    RecyclerView MyRecyclerView;
    String Fruits[] = {"Mango","Apple","Grapes","Papaya","WaterMelon"};
    int  Images[] = {R.drawable.mango,R.drawable.apple,R.drawable.grapes,R.drawable.papaya,R.drawable.watermelon};
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        listitems.clear();
        for(int i =0;i<Fruits.length;i++){
            Fruit item = new Fruit();
            item.setCardName(Fruits[i]);
            item.setImageResourceId(Images[i]);
            item.setIsfav(0);
            item.setIsturned(0);
            listitems.add(item);
        }
        getActivity().setTitle("Fruit List");
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_horizontal_list_view, container, false);
        MyRecyclerView = (RecyclerView) view.findViewById(R.id.cardView);
        MyRecyclerView.setHasFixedSize(true);
        LinearLayoutManager MyLayoutManager = new LinearLayoutManager(getActivity());
        MyLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        if (listitems.size() > 0 & MyRecyclerView != null) {
            MyRecyclerView.setAdapter(new MyAdapter(listitems));
        }
        MyRecyclerView.setLayoutManager(MyLayoutManager);
        return view;
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
        private ArrayList<Fruit> list;
        public MyAdapter(ArrayList<Fruit> Data) {
            list = Data;
        }
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
            // create a new view
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.recycle_items, parent, false);
            MyViewHolder holder = new MyViewHolder(view);
            return holder;
        }
        @Override
        public void onBindViewHolder(final MyViewHolder holder, int position) {
            holder.titleTextView.setText(list.get(position).getCardName());
            holder.coverImageView.setImageResource(list.get(position).getImageResourceId());
            holder.coverImageView.setTag(list.get(position).getImageResourceId());
            holder.likeImageView.setTag(R.drawable.ic_like);
        }
        @Override
        public int getItemCount() {
            return list.size();
        }
    }
    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView titleTextView;
        public ImageView coverImageView;
        public ImageView likeImageView;
        public ImageView shareImageView;
        public MyViewHolder(View v) {
            super(v);
            titleTextView = (TextView) v.findViewById(R.id.titleTextView);
            coverImageView = (ImageView) v.findViewById(R.id.coverImageView);
            likeImageView = (ImageView) v.findViewById(R.id.likeImageView);
            shareImageView = (ImageView) v.findViewById(R.id.shareImageView);
            likeImageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int id = (int)likeImageView.getTag();
                    if( id == R.drawable.ic_like){
                        likeImageView.setTag(R.drawable.ic_liked);
                        likeImageView.setImageResource(R.drawable.ic_liked);
                        Toast.makeText(getActivity(),titleTextView.getText()+" added to favourites",Toast.LENGTH_SHORT).show();
                    }else{
                        likeImageView.setTag(R.drawable.ic_like);
                        likeImageView.setImageResource(R.drawable.ic_like);
                        Toast.makeText(getActivity(),titleTextView.getText()+" removed from favourites",Toast.LENGTH_SHORT).show();
                    }
                }
            });
            shareImageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Uri imageUri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE +
                            "://" + getResources().getResourcePackageName(coverImageView.getId())
                            + '/' + "drawable" + '/' + getResources().getResourceEntryName((int)coverImageView.getTag()));
                    Intent shareIntent = new Intent();
                    shareIntent.setAction(Intent.ACTION_SEND);
                    shareIntent.putExtra(Intent.EXTRA_STREAM,imageUri);
                    shareIntent.setType("image/jpeg");
                    startActivity(Intent.createChooser(shareIntent, getResources().getText(R.string.send_to)));
                }
            });
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

package ir.programchi;

/**

* Created by Jefferson on 11/4/16.

import android.content.ContentResolver;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import java.util.ArrayList;

public class HorizontalListViewFragment extends Fragment {

ArrayList<Fruit> listitems = new ArrayList<>();

RecyclerView MyRecyclerView;

String Fruits[] = {"Mango","Apple","Grapes","Papaya","WaterMelon"};

int Images[] = {R.drawable.mango,R.drawable.apple,R.drawable.grapes,R.drawable.papaya,R.drawable.watermelon};

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

listitems.clear();

for(int i =0;i<Fruits.length;i++){

Fruit item = new Fruit();

item.setCardName(Fruits[i]);

item.setImageResourceId(Images[i]);

item.setIsfav(0);

item.setIsturned(0);

listitems.add(item);

}

getActivity().setTitle("Fruit List");

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_horizontal_list_view, container, false);

MyRecyclerView = (RecyclerView) view.findViewById(R.id.cardView);

MyRecyclerView.setHasFixedSize(true);

LinearLayoutManager MyLayoutManager = new LinearLayoutManager(getActivity());

MyLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

if (listitems.size() > 0 & MyRecyclerView != null) {

MyRecyclerView.setAdapter(new MyAdapter(listitems));

}

MyRecyclerView.setLayoutManager(MyLayoutManager);

return view;

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

}

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

private ArrayList<Fruit> list;

public MyAdapter(ArrayList<Fruit> Data) {

list = Data;

}

@Override

public MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {

// create a new view

View view = LayoutInflater.from(parent.getContext())

.inflate(R.layout.recycle_items, parent, false);

MyViewHolder holder = new MyViewHolder(view);

return holder;

}

@Override

public void onBindViewHolder(final MyViewHolder holder, int position) {

holder.titleTextView.setText(list.get(position).getCardName());

holder.coverImageView.setImageResource(list.get(position).getImageResourceId());

holder.coverImageView.setTag(list.get(position).getImageResourceId());

holder.likeImageView.setTag(R.drawable.ic_like);

}

@Override

public int getItemCount() {

return list.size();

}

public class MyViewHolder extends RecyclerView.ViewHolder {

public TextView titleTextView;

public ImageView coverImageView;

public ImageView likeImageView;

public ImageView shareImageView;

public MyViewHolder(View v) {

super(v);

titleTextView = (TextView) v.findViewById(R.id.titleTextView);

coverImageView = (ImageView) v.findViewById(R.id.coverImageView);

likeImageView = (ImageView) v.findViewById(R.id.likeImageView);

shareImageView = (ImageView) v.findViewById(R.id.shareImageView);

likeImageView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

int id = (int)likeImageView.getTag();

if( id == R.drawable.ic_like){

likeImageView.setTag(R.drawable.ic_liked);

likeImageView.setImageResource(R.drawable.ic_liked);

Toast.makeText(getActivity(),titleTextView.getText()+" added to favourites",Toast.LENGTH_SHORT).show();

}else{

likeImageView.setTag(R.drawable.ic_like);

likeImageView.setImageResource(R.drawable.ic_like);

Toast.makeText(getActivity(),titleTextView.getText()+" removed from favourites",Toast.LENGTH_SHORT).show();

}

});

shareImageView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Uri imageUri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE +

"://" + getResources().getResourcePackageName(coverImageView.getId())

+ '/' + "drawable" + '/' + getResources().getResourceEntryName((int)coverImageView.getTag()));

Intent shareIntent = new Intent();

shareIntent.setAction(Intent.ACTION_SEND);

shareIntent.putExtra(Intent.EXTRA_STREAM,imageUri);

shareIntent.setType("image/jpeg");

startActivity(Intent.createChooser(shareIntent, getResources().getText(R.string.send_to)));

}

});

}

در layout اصلی که در اینجا نام آن برابر با activity_main.xml است کد های زیر را قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/fragmentContainer"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

</FrameLayout>

بعد از اینکار نوبت به آخرین کار می رسد باید در اکتیویتی اصلی MainActivity.java کد های زیر را قرار دهید.

package ir.programchi;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FragmentManager fm = getSupportFragmentManager();
        Fragment fragment = fm.findFragmentById(R.id.fragmentContainer);
        if (fragment == null) {
            fragment = new HorizontalListViewFragment();
            ;
            fm.beginTransaction()
                    .add(R.id.fragmentContainer, fragment)
                    .commit();
        }
    }
}

package ir.programchi;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

FragmentManager fm = getSupportFragmentManager();

Fragment fragment = fm.findFragmentById(R.id.fragmentContainer);

if (fragment == null) {

fragment = new HorizontalListViewFragment();

;

fm.beginTransaction()

.add(R.id.fragmentContainer, fragment)

.commit();

}

در بالا فرگمنت را در layout اصلی لود می کنیم. اگر یادتان باشد در فرگمنت Recyclerview را قرار دادیم با این کار شما می توانید این بخش را در هر جای از پروژه خود خواستید بارگذاری کنید.

این آموزش هم به پایان رسید.

موفق

مطالعه بیشتر

3 پاسخ به “طراحی متریال دیزاین Recyclerview افقی در اندروید”

مهدی گفت:
مهر 21, 1396 در 7:55 ب.ظ
ممنون از آموزش های خوبتون
فایل fragment_horizontal_list_view رو مشاهده نکردم در توضیحات و در کدها از این لایه استفاده شده؟
پاسخ
ح گفت:
مرداد 9, 1397 در 12:03 ب.ظ
سلام.ممنون از آموزشتون.فقط من یک مشکلی که دارم این هست که وقتی دکمه های هر آیتم رو میزنم گاهی عمل میکنه گاهی هم اصلا عمل نمیکنه و باید چند بار کلیک کنم تا عمل کنه.ممنون میشم راهنماییم کنید
پاسخ
ح گفت:
مرداد 9, 1397 در 12:57 ب.ظ
حل شد
پاسخ

طراحی متریال دیزاین Recyclerview افقی در اندروید

مطالب مشابه

3 پاسخ به “طراحی متریال دیزاین Recyclerview افقی در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

3 پاسخ به “طراحی متریال دیزاین Recyclerview افقی در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی