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>