Android学习之高仿知乎首页

晚上回来无事，在车上看了一下知乎App，发现知乎大量采用Material Design里面所包含的新技术，回到家忍耐不住，就高仿了一下知乎的首页。

先给大家看下高仿知乎的首页效果图吧

大概就是这样，先分析技术点

1.RecylerView实现列表页

2.CardView实现Item的卡片效果

3.侧滑删除不感兴趣的Item，这里我采用ItemTouchHelper

4.浮动按钮FloatingActionButton

5.采用SwipeRefreshLayout实现下拉刷新

大概就这么几个技术要点，我这里全都实现了。

分析一：RecyclerView 提供了 LayoutManager，RecylerView 不负责子 View 的布局，靠LayoutManager 来实现不同的布局效果.

1.LinearLayoutManager 现行管理器，支持横向、纵向。

2.GridLayoutManager 网格布局管理器

3.StaggeredGridLayoutManager 瀑布就式布局管理器

分析二：CardView继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片可以包含圆角和阴影。

1、使用android:cardCornerRadius属性指定圆角半径

2、使用CardView.setRadius 设置圆角半径。

3、使用 android:cardBackgroundColor属性设置卡片颜色

  <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        card_view:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="4dp">
</android.support.v7.widget.CardView>

分析三：ItemTouchHelper实现Item侧滑删除，详情看我博客

http://blog.csdn.net/qq_16131393/article/details/50983839

分析四：FloatingActionButton浮动按钮的引用，这里不多做解释，很简单。

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="8dp"
        />

分析五：SwipeRefreshLayout实现下拉刷新，详情介绍请看我博客

http://blog.csdn.net/qq_16131393/article/details/50983006

下面分析代码

首先还是老规矩，添加依赖

 compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:24.0.0-alpha1'
    compile 'com.android.support:cardview-v7:24.0.0-alpha1'
    compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'
    compile 'com.getbase:floatingactionbutton:1.10.1'

布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.wangchang.test_zhihu.MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/layRefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recylerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.SwipeRefreshLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="8dp"
        />
</RelativeLayout>

这里主要是RecylerView，SwipeRefreshLayout，FloatingActionButton的布局方式，

这很简单，我的博客里都做过有关介绍，不多说了。

MainActivity.class

package com.example.wangchang.test_zhihu;

import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.SwipeRefreshLayout;
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.helper.ItemTouchHelper;
import android.view.View;

import com.example.wangchang.test_zhihu.helper.OnStartDragListener;
import com.example.wangchang.test_zhihu.helper.SimpleItemTouchHelperCallback;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements OnStartDragListener {

    private SwipeRefreshLayout layRefresh;
    private RecyclerView recyclerView;
    private DemoAdapter adapter;
    private ItemTouchHelper mItemTouchHelper;
    private FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layRefresh = (SwipeRefreshLayout) findViewById(R.id.layRefresh);
        recyclerView = (RecyclerView) findViewById(R.id.recylerview);
        fab= (FloatingActionButton) findViewById(R.id.fab);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        recyclerView.setAdapter(adapter = new DemoAdapter(this));
        ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(adapter);
        mItemTouchHelper = new ItemTouchHelper(callback);
        mItemTouchHelper.attachToRecyclerView(recyclerView);
        adapter.replaceAll(getData());


        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "what are you doing", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        layRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                try {
                    Thread.sleep(2000);
                    adapter.replaceAll(getData());
                    layRefresh.setRefreshing(false);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }


            }
        });
    }

    public ArrayList<Model> getData() {
        ArrayList<Model> list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            Model model = new Model();
            model.setContent("Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式，发布了Android的源代码。第一部Android智能手机发布于2008年10月。Android逐渐扩展到平板电脑及其他领域上，如电视、数码相机、游戏机等。");
            model.setCount("3.4K");
            model.setTitle("人生若只如初见");
            model.setType("来自互联网");
            list.add(model);
        }
        return list;
    }

    @Override
    public void onStartDrag(RecyclerView.ViewHolder viewHolder) {
        mItemTouchHelper.startDrag(viewHolder);
    }
}

这里主要实现初始化，以及数据填充，ItemTouchHelper 的绑定。

适配器DemoAdapter

package com.example.wangchang.test_zhihu;

import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.wangchang.test_zhihu.helper.ItemTouchHelperAdapter;
import com.example.wangchang.test_zhihu.helper.ItemTouchHelperViewHolder;
import com.example.wangchang.test_zhihu.helper.OnStartDragListener;

import java.util.ArrayList;
import java.util.Collections;

/** * Created by WangChang on 2016/3/31. */
public class DemoAdapter extends RecyclerView.Adapter<DemoAdapter.BaseViewHolder> implements ItemTouchHelperAdapter {

    private ArrayList<Model> dataList = new ArrayList<>();
    private OnStartDragListener mDragStartListener;


    public DemoAdapter(OnStartDragListener mDragStartListener) {
        this.mDragStartListener = mDragStartListener;
    }
    public void replaceAll(ArrayList<Model> list) {
        dataList.clear();
        if (list != null && list.size() > 0) {
            dataList.addAll(list);
        }
        notifyDataSetChanged();
    }

    @Override
    public DemoAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new DemoViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false));
    }

    @Override
    public void onBindViewHolder(DemoAdapter.BaseViewHolder holder, int position) {

        holder.setData(dataList.get(position));
    }

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

    @Override
    public boolean onItemMove(int fromPosition, int toPosition) {
        Collections.swap(dataList, fromPosition, toPosition);
        notifyItemMoved(fromPosition, toPosition);
        return true;
    }

    @Override
    public void onItemDismiss(int position) {
        dataList.remove(position);
        notifyItemRemoved(position);
    }

    public class BaseViewHolder extends RecyclerView.ViewHolder {
        public BaseViewHolder(View itemView) {
            super(itemView);
        }

        void setData(Object data) {
        }
    }

    private class DemoViewHolder extends BaseViewHolder implements ItemTouchHelperViewHolder {
        private TextView tvType, tvCount, tvTitle, tvContent;

        public DemoViewHolder(View view) {
            super(view);
            tvType = (TextView) view.findViewById(R.id.tvType);
            tvCount = (TextView) view.findViewById(R.id.tvCount);
            tvTitle = (TextView) view.findViewById(R.id.tvTitle);
            tvContent = (TextView) view.findViewById(R.id.tvContent);
        }

        @Override
        void setData(Object data) {
            if (data != null) {
                Model model = (Model) data;
                tvType.setText(model.getType());
                tvCount.setText(model.getCount());
                tvTitle.setText(model.getTitle());
                tvContent.setText(model.getContent());
            }
        }

        @Override
        public void onItemSelected() {
            itemView.setBackgroundColor(0);
        }

        @Override
        public void onItemClear() {
            itemView.setBackgroundColor(0);
        }
    }
}

这里面主要是数据的显示，另外加重写onItemMove，onItemDismiss两个方法来实现侧滑删除。

大概就这么多啦，这次又搞到凌晨了，不写了，本次仿写主要是对这几个知识点的总结

附上代码

http://pan.baidu.com/s/1slf2Ax3