5min通过ViewPager实现简易微信主界面（1）-雏形

今天我们学一下ViewPager并用它做一个简易的微信主界面，完成一个雏形。

Demo完成后效果如下图：

我们先定义ViewPagerIndicator继承自LinearLayout，里面会有3个TextView，作为顶部选项栏。在这里我们还绘制了一个小三角形，后期我们将实现三角形联动的效果。

<span style="font-size:18px;">import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.CornerPathEffect;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.widget.LinearLayout;/** * Created by 权兴权意 on 2016/9/26. */public class ViewPagerIndicator extends LinearLayout {    private Paint mPaint;    private Path mPath;    private int mTriangleWidth;    private int mTriangleHeight;    private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;    private int mInitTranslationX;    private int mMoveTranslationX;    public ViewPagerIndicator(Context context) {        this(context, null);    }    public ViewPagerIndicator(Context context, AttributeSet attrs) {        super(context, attrs);        //初始化画笔        mPaint = new Paint();        mPaint.setAntiAlias(true);//设置抗锯齿        mPaint.setColor(Color.parseColor("#ffffffff"));        mPaint.setStyle(Paint.Style.FILL);        mPaint.setPathEffect(new CornerPathEffect(3));//三角形不显得太尖锐    }    @Override    protected void dispatchDraw(Canvas canvas) {        canvas.save();        canvas.translate(mInitTranslationX+mMoveTranslationX,getHeight()+2);        canvas.drawPath(mPath,mPaint);        canvas.restore();        super.dispatchDraw(canvas);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mTriangleWidth = (int) (w / 3 * RADIO_TRIANGLE_WIDTH);        mTriangleHeight = mTriangleWidth / 2;//45度        mInitTranslationX = w / 3 / 2 - mTriangleWidth / 2;        initTriangle();    }    private void initTriangle() {        mPath = new Path();        mPath.moveTo(0,0);        mPath.lineTo(mTriangleWidth,0);        mPath.lineTo(mTriangleWidth/2,-mTriangleHeight);        mPath.close();    }}</span>

然后我们写一下布局文件如下，这里我们使用android.support.v4.view.ViewPager：

<span style="font-size:18px;"><?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:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="#ffffffff"    >    <com.quan.car.viewpagertest.ViewPagerIndicator        android:id="@+id/top_vpi_main"        android:layout_width="match_parent"        android:layout_height="45dp"        android:orientation="horizontal"        android:background="@mipmap/bg_black"        >        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="微信"            android:textColor="#CCFFFFFF"            android:textSize="16sp"            android:gravity="center"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="发现"            android:textColor="#CCFFFFFF"            android:textSize="16sp"            android:gravity="center"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="我的"            android:textColor="#CCFFFFFF"            android:textSize="16sp"            android:gravity="center"            />    </com.quan.car.viewpagertest.ViewPagerIndicator><android.support.v4.view.ViewPager    android:id="@+id/main_vp_main"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1"    ></android.support.v4.view.ViewPager></LinearLayout></span>

下面我们自定义BaseFragment继承自Fragment，里面是一个TextView。

<span style="font-size:18px;">import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by 权兴权意 on 2016/9/29. */public class BaseFragment extends Fragment {    private String mTitle;    public static final String BUNDLE_TITLE = "title";    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        Bundle bundle = getArguments();        if(bundle != null)            mTitle = bundle.getString(BUNDLE_TITLE);        TextView tv = new TextView(getActivity());        tv.setText(mTitle);        tv.setGravity(Gravity.CENTER);        return tv;    }    public static BaseFragment newInstance(String title){        Bundle bundle = new Bundle();        bundle.putString(BUNDLE_TITLE,title);        BaseFragment baseFragment = new BaseFragment();        baseFragment.setArguments(bundle);        return baseFragment;    }}</span>

最后在MainActivity中完成核心逻辑：

<span style="font-size:18px;">    private ViewPagerIndicator top_vpi_main;    private ViewPager main_vp_main;    private List<String> titles = Arrays.asList("微信","发现","我的");    private List<BaseFragment> contents = new ArrayList<BaseFragment>();    private FragmentPagerAdapter adapter;</span>

初始化视图：

<span style="font-size:18px;">        main_vp_main = (ViewPager) findViewById(R.id.main_vp_main);        top_vpi_main = (ViewPagerIndicator) findViewById(R.id.top_vpi_main);</span>

初始化数据：

<span style="font-size:18px;">        for (String t : titles){            BaseFragment baseFragment = BaseFragment.newInstance(t);            contents.add(baseFragment);            adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {                @Override                public Fragment getItem(int position) {                    return contents.get(position);                }                @Override                public int getCount() {                    return contents.size();                }            };        }        main_vp_main.setAdapter(adapter);</span>

完整源代码如下：

<span style="font-size:18px;">import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.Window;import java.util.ArrayList;import java.util.Arrays;import java.util.List;public class MainActivity extends FragmentActivity {    private ViewPagerIndicator top_vpi_main;    private ViewPager main_vp_main;    private List<String> titles = Arrays.asList("微信","发现","我的");    private List<BaseFragment> contents = new ArrayList<BaseFragment>();    private FragmentPagerAdapter adapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initViews();        initDatas();    }    private void initDatas() {        for (String t : titles){            BaseFragment baseFragment = BaseFragment.newInstance(t);            contents.add(baseFragment);            adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {                @Override                public Fragment getItem(int position) {                    return contents.get(position);                }                @Override                public int getCount() {                    return contents.size();                }            };        }        main_vp_main.setAdapter(adapter);    }    private void initViews() {        main_vp_main = (ViewPager) findViewById(R.id.main_vp_main);        top_vpi_main = (ViewPagerIndicator) findViewById(R.id.top_vpi_main);    }}</span>