效果展示:
切换后:
实现思路:
1.三个书签其实就是三个TextView,先用shape画出TextView的两种状态,然后用选择器selector去切换TextView的状态。
2.创建三个Fragment,然后使用FragmentPagerAdapter进行适配。
3.三个TextView设置监听方法,当切换TextView时,Fragment也会相应的改变,也可以给三个ViewPager设置监听。
好了,不多说,下面开始代码展示咯:
1、Activity的布局代码:
<?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">
<ImageView
android:id="@+id/iv_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/pic2"/>
<RelativeLayout
android:id="@+id/rl_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:layout_marginTop="222dp"
android:background="#0ff"
android:orientation="vertical">
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="38dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:background="@drawable/left_blue_selector"
android:gravity="center"
android:text="游戏信息"
android:textColor="@color/text_selector"
/>
<TextView
android:id="@+id/tv_gift"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:background="@drawable/blue_selector"
android:gravity="center"
android:text="游戏礼包"
/>
<TextView
android:id="@+id/tv_pl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
android:layout_marginRight="12dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:background="@drawable/right_blue_selector"
android:gravity="center"
android:text="评论"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</RelativeLayout>
2.选择器selector的代码,我就演示一个了,其他两个选择器都差不多:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 当我们点击TtxtView时,我们就会选择left_blue_selector_true这个状态,也就是选中状态。-->
<item android:drawable="@drawable/left_blue_selector_true" android:state_selected="true"/>
<item android:drawable="@drawable/left_blue_selector_false"/>
</selector>
3.shopa中的代码:
选中状态:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--画圆角-->
<!--bottomLeftRadius:左下角的圆的半径-->
<!--android:radius="4dp":代表四个角的圆角的半径-->
<corners
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp" />
<!--shape中间填充部分的颜色:蓝色-->
<solid android:color="@android:color/holo_blue_light" />
<!--shape边框的颜色-->
<stroke
android:width="2px"
android:color="@android:color/holo_blue_light" />
</shape>
未选中状态:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--画圆角-->
<!--bottomLeftRadius:左下角的圆的半径-->
<!--android:radius="4dp":代表四个角的圆角的半径-->
<corners
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
/>
<!--shape中间填充部分的颜色:白色-->
<solid android:color="@android:color/white" />
<!--shape边框的颜色-->
<stroke
android:width="1dp"
android:color="@android:color/holo_blue_light" />
</shape>
4.Activity中的java代码:
public class GameDetailActivity extends BaseActivity {
private BaseFragmentPageAdapter mAdapter;
private List<Fragment> list;
private ViewPager mViewpager;
private RelativeLayout rlContainer;
private ImageView ivBg;
private int offset;
private boolean isShow=false;
private TextView textView1,textView2,textView3;
@Override
protected int setViewId() {
return R.layout.activity_game_detail;
}
@Override
protected void findviews() {
rlContainer = (RelativeLayout) findViewById(R.id.rl_container);
ivBg = (ImageView) findViewById(R.id.iv_bg);
textView1= (TextView) findViewById(R.id.tv_message);
textView2= (TextView) findViewById(R.id.tv_gift);
textView3= (TextView) findViewById(R.id.tv_pl);
mViewpager= (ViewPager) findViewById(R.id.viewpager);
}
@Override
protected void initEvent() {
//TODO 这三个text的点击监听事件,其他也必须设置这三个点击事件,不然点击text的时候会被图片隐藏
textView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView1.setSelected(true);
textView3.setSelected(false);
textView2.setSelected(false);
mViewpager.setCurrentItem(0);//TODO setCurrentItem(0)方法表示获得viewpager中的第一个Fragment。
}
});
textView2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView1.setSelected(false);
textView3.setSelected(false);
textView2.setSelected(true);
mViewpager.setCurrentItem(1);
}
});
textView3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
textView1.setSelected(false);
textView3.setSelected(true);
textView2.setSelected(false);
mViewpager.setCurrentItem(2);
}
});
textView1.performClick();
loadData();
mAdapter=new BaseFragmentPageAdapter(getSupportFragmentManager(),list);
mViewpager.setAdapter(mAdapter);
//TODO ViewPager的监听
mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
textView1.setSelected(true);
textView3.setSelected(false);
textView2.setSelected(false);
break;
case 1:
textView1.setSelected(false);
textView2.setSelected(true);
textView3.setSelected(false);
break;
case 2:
textView2.setSelected(false);
textView3.setSelected(true);
textView1.setSelected(false);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
@Override
protected void loadData() {
list = new ArrayList<>();
FragmentGift gift = new FragmentGift();
FragmentMessage message = new FragmentMessage();
FragmentPl pl = new FragmentPl();
list.add(message);//TODO 第一个添加的Fragment就等于setCurrentItem(0)。为ViewPager中的第一个fragment。
list.add(gift);
list.add(pl);
}
}
5.适配器
public class BaseFragmentPageAdapter extends FragmentPagerAdapter
{
/**
* Fragment集合
*/
private List<Fragment> list;
private List<String> titles;
public BaseFragmentPageAdapter(FragmentManager fm, List<Fragment> list)
{
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position)
{
return list.get(position);
}
@Override
public int getCount()
{
return list.size();
}
/**
* 返回当前position对应的title
*
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position)
{
String title = "";
//如果使用了两个参数的构造方法,会导致titles为null,所以加入此判断
if (titles != null)
{
title = titles.get(position);
}
return title;
}
}