淘先锋技术网

首页 1 2 3 4 5 6 7

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