طراحی متریال دیزاین 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'

پروژه را 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;
    }
}

کد بالا به 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>

در بالا 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>

کد بالا شکل ظاهری هر آیتم که در 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>

در پروژه یکسری عکس استفاده شده است در زیر فایل را دانلود کرده و درپوشه 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>

یک فایل جاوا به نام 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)));
                }
            });
        }
    }
}

در 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>

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

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

 
 

مطالعه بیشتر