Android学习之高仿知乎首页

来源：互联网发布：区块链 p2p网络层编辑：程序博客网时间：2024/05/09 04:58

晚上回来无事，在车上看了一下知乎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

1 0