Android Material Design(1) RecyclerView 的使用

Material Design 自從谷歌推出以來就受到廣大開發者的支持,做爲一名開發者,我們有必要跟上時代的步伐,去學習新的東西,不能因循守舊,固步自封,所以今天來學習一下

谷歌推出來的新控件 RecyclerView的使用(Junk Words No More Say,Let's LOL)


首先先說一下我的開發環境

Android Studio2.0 beta6

Sdk api23

本篇用到了RecyclerView ,ToolBar,Snackbar

我們想要使用這些新控件,在以往的eclipse中,都是需要添加依賴庫或者jar包的,但是在Android Studio中,我們僅僅只用在項目的build.gradle中添加兩行代碼就行了

build.gradle文件:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.example.md_0"
        minSdkVersion 14
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:recyclerview-v7:23.2.0'
    compile 'com.android.support:design:23.2.0'
}

我們的佈局文件是這樣子的:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.md_0.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff6600"
        >
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerV_main"
        android:layout_width="match_parent"
        android:background="#666666"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>

Item的佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#666666"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginBottom="2dp"
        android:background="#fff"
        android:gravity="center"
        />

</LinearLayout>
因爲RecyclerView沒有給我們提供ListVIew中divider的屬性的,所以我是在item的佈局中通過設置邊距來達到這一目的


Activity代碼:

package com.example.md_0;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar_main;
    private RecyclerView recyclerV_main;
    private List<String> name_list;
    private MyAdapter myadapter;

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

    private void initData() {
        name_list = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            name_list.add("Hello World I'm The " + i);
        }

        // 創建一個線性佈局管理器
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        // 設置佈局管理器
        recyclerV_main.setLayoutManager(layoutManager);
        myadapter = new MyAdapter(this, name_list);
        // 設置適配器
        recyclerV_main.setAdapter(myadapter);

        myadapter.setOnItemClickLitener(new MyAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Snackbar.make(view, "Hello Click\t" + position, Snackbar.LENGTH_SHORT).show();
            }
        });

        myadapter.setOnItemLongClickListener(new MyAdapter.OnItemLongClickListener() {
            @Override
            public void onItemLongClick(View view, int position) {
                Toast.makeText(MainActivity.this, "Hello Long Click\t" + position, Toast.LENGTH_SHORT).show();
            }
        });


    }

    private void initView() {
        toolbar_main = (Toolbar) findViewById(R.id.toolbar_main);
        recyclerV_main = (RecyclerView) findViewById(R.id.recyclerV_main);
        setSupportActionBar(toolbar_main);
    }
}

Adapter代碼:

package com.example.md_0;

import android.app.Activity;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

/**
 * Created by 康 on 2016/3/9.
 */
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Activity context;
    private List<String> name_list;


    public MyAdapter(Activity context, List<String> name_list) {
        this.context = context;
        this.name_list = name_list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //這裏有一個坑點,就是如果用View.inflate(context, R.layout.item_recyclerview, null)的話,就算是在
        //item的佈局文件中設置了高爲多少,寬度爲多少都是沒用的,最後用LayoutInflater.from(context).inflate(R.layout.item_recyclerview, parent, false);
        // 而且這個方法的第二個參數最好設置爲該parent
        //       View itemView = View.inflate(context, R.layout.item_recyclerview, null);
        View itemView = LayoutInflater.from(context).inflate(R.layout.item_recyclerview, parent, false);
        MyViewHolder viewHolder = new MyViewHolder(itemView);
        return viewHolder;
    }

    //綁定數據
    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        holder.txt_name.setText(name_list.get(position));

        if (onItemClickLitener != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onItemClickLitener.onItemClick(holder.itemView, position);
                }
            });
        }

        if (onItemLongClickListener != null) {
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    onItemLongClickListener.onItemLongClick(holder.itemView, position);
                    return true;
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return name_list == null ? 0 : name_list.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder {

        public TextView txt_name;

        public MyViewHolder(View itemView) {
            super(itemView);
            txt_name = (TextView) itemView.findViewById(R.id.txt_name);
        }
    }


    //ItemClickLitener
    public interface OnItemClickLitener {
        void onItemClick(View view, int position);
    }

    private OnItemClickLitener onItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener onItemClickLitener) {
        this.onItemClickLitener = onItemClickLitener;
    }

    //ItemLongClickListener
    public interface OnItemLongClickListener {
        void onItemLongClick(View view, int position);
    }

    private OnItemLongClickListener onItemLongClickListener;

    public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) {
        this.onItemLongClickListener = onItemLongClickListener;
    }

}

最後運行效果爲:


項目中遇到的坑點:

1.Adapter的onCreateViewHolder方法中,不要直接使用View.inflate函數,最好用LayoutInflater.from(context).inflate(R.layout.item_recyclerview, parent, false);區別詳見於

http://blog.csdn.net/lmj623565791/article/details/38171465

2.如果要用toolbar的話,記得把actiivty的主題設置成一個沒有ActionBar的主題.不然會報錯,我用的主題爲

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

源碼地址:https://github.com/imgod1/MD_0

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章