android底部导航栏+viewPager+自定义view的简单实现

Ps：导航栏直接用Android Design Library，导航栏的话用TabLayout实现，是比较方便快捷的方法。以下仅供初学者学习。。。。一年后回过来看写的比较糟糕

1首先我们要解决界面的问题，也就是先让用户能看到界面，再来搞定能不能用的问题是吧。首先是下面导航栏，我第第一反应就是想到一个ImageView+TextView的组合，也就是用到了组合控件，这里我叫它phototext.xml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerVertical="true">

<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
tools:src="@mipmap/ic_launcher"/>

<TextView
android:id="@+id/photo_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
tools:text="男"/>
</LinearLayout>
</RelativeLayout>

有了布局文件，那么就要有java文件嘛，因为自定义，不然的话上面布局就是死的，不可以自己自定义了。java文件自然也叫PhotoText.java,很好听吧。。突然觉得我是取名字的天才。。。

public class PhotoText extends RelativeLayout {

private final String TAG = "PHOTOTEXT";

private ImageView iv;//图片
private TextView tv;//文字

//以下是自定义View自己可以设置的属性
private int mtextSize=15;
private String mText;
private Drawable mPhoto;
private Drawable mBackGround;
private ColorStateList mTextColor;

public PhotoText(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.photo_text,this,true);

TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.PhotoText);

int n=ta.getIndexCount();
for (int i=0;i<n;i++){
int atrr = ta.getIndex(i);
switch (atrr){
case R.styleable.PhotoText_mText:
mText=ta.getString(atrr); break;
case R.styleable.PhotoText_mphoto:
mPhoto=ta.getDrawable(atrr);break;
case R.styleable.PhotoText_mBackGround:
mBackGround=ta.getDrawable(atrr);break;
case R.styleable.PhotoText_mTextSize:
mtextSize=ta.getDimensionPixelSize(atrr,mtextSize);break;
case R.styleable.PhotoText_mTextColor:
mTextColor=ta.getColorStateList(atrr);break;
}
}
ta.recycle();

iv= (ImageView) findViewById(R.id.photo);
tv=(TextView)findViewById(R.id.photo_text);
iv.setImageDrawable(mPhoto);
tv.setText(mText);
tv.setTextSize(mtextSize);
tv.setTextColor(mTextColor!=null ? mTextColor : ColorStateList.valueOf(0xFF000000));
setBackground(mBackGround);
}

public void setSelected(boolean is){
iv.setSelected(is);
tv.setSelected(is);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}

}

接下来就可以用了喔，也就是在mainActivity的布局里用activity_main.xml文件里喽

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/navigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#f3f1f1"
android:layout_alignParentBottom="true">

<view.PhotoText
android:id="@+id/data_tab"
android:layout_width="30dp"
android:layout_height="60dp"
android:layout_weight="1"
custom:mTextSize="5dp"
custom:mphoto="@drawable/data_tab_selected"
custom:mText="数据"
custom:mTextColor="@drawable/textcolor_tab"
>
</view.PhotoText>

<view.PhotoText
android:id="@+id/setting_tab"
android:layout_width="30dp"
android:layout_height="60dp"
android:layout_weight="1"
custom:mphoto="@drawable/setting_tab_selected"
custom:mText="设置"
custom:mTextColor="@drawable/textcolor_tab">
</view.PhotoText>

</LinearLayout>

<android.support.v4.view.ViewPager
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/navigationBar">
</android.support.v4.view.ViewPager>

</RelativeLayout>

因为项目只用了两个选项，所以导航栏只有两个，要多加只需添加多PhotoText控件，并把weight都设为1就可以均分了，这里用了viewpager为了实现像微信那样左右滑动能切换选项卡，接下来就是java代码实现了，也就是主MainActivity.java了，先看代码嘛再讲思路

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

//两个选项
PhotoText dataTab;
PhotoText settingTab;

FragmentManager fm;
ViewPager viewPager;
ArrayList<android.app.Fragment> fragmentsList;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fm = getFragmentManager();
fragmentsList = new ArrayList<>();
}

@Override
protected void onStart() {
super.onStart();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
dataTab= (PhotoText) findViewById(R.id.data_tab);
settingTab= (PhotoText) findViewById(R.id.setting_tab);

viewPager = (ViewPager) findViewById(R.id.content);
FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(fm) {
@Override
public android.app.Fragment getItem(int position) {
return fragmentsList.get(position);

}

@Override
public int getCount() {
return fragmentsList.size();
}

};
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
selectTab(position);
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}
});
dataTab.setOnClickListener(this);
settingTab.setOnClickListener(this);
selectTab(0);
}

/*
传入0表示第一个tab被选择
1表示第二个变选中,设置selected
*/
public void selectTab(int tab){
switch (tab){
case 0:
dataTab.setSelected(true);
settingTab.setSelected(false);
break;
case 1:
dataTab.setSelected(false);
settingTab.setSelected(true);
break;
}
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.data_tab:
viewPager.setCurrentItem(0);
break;
case R.id.setting_tab:
viewPager.setCurrentItem(1);
}
}
}

首先呢，我们需要viewpager的adapter，这里用的是FragmentPagerAdapter，这个Adapter需要两个Fragment，也就是我们在创建Adapter之前new出两个Fragment并放在集合中，然后getFragmentManager()拿到碎片管理器，接下来把这两个参数穿进去就可以用了，最后收尾工作就是设置以下，导航栏的监听和viewpager的滑动监听。。。over，

如果你有什么问题可在下方评论，如果觉得对你有帮助呢，顶一下，，，谢谢啦

另外附上源代码地址哦，以免我口齿不清难以理解。哈哈O(∩_∩)O

http://download.csdn.net/detail/sinat_28676875/9605005