有时候navigation的选项卡是需要动态获取的,并不是能够在XML布局文件中固定写死的,这个时候就需要在获取到每个选项后在Activity代码中动态生成每一个选项。
该选项会随着ViewPager的左右滑动而逐渐出现或者消失,不是一屏就可以显示完全。
示意图如下:
部分代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.vac.demo_navigation.MainActivity"
android:orientation="vertical"
tools:ignore="MergeRootFrame" >
<HorizontalScrollView
android:id="@+id/hScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
</RadioGroup>
<TextView
android:id="@+id/indicator"
android:layout_width="100dp"
android:layout_height="2dp"
android:background="#f00"/>
</LinearLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
需要一个横向的HorizontalScrollView来放容器RadioGroup和指示器Indicator。
package com.vac.demo_navigation;
import java.util.ArrayList;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.LayoutParams;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private HorizontalScrollView hSrollview;
private RadioGroup rg;
private String[] title = new String[]{"选项一","选项二","选项三","选项四","选项五",
"选项六","选项七","选项八"};
private TextView indicator;
private LinearLayout.LayoutParams indicatorParams;
private ArrayList<Fragment> fraList = new ArrayList<Fragment>();
private MyPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
rg = (RadioGroup) findViewById(R.id.radioGroup);
hSrollview = (HorizontalScrollView) findViewById(R.id.hScrollView);
indicator = (TextView) findViewById(R.id.indicator);
indicatorParams = (android.widget.LinearLayout.LayoutParams) indicator.getLayoutParams();
for (int i = 0; i < 8; i++) {
RadioButton rb = new RadioButton(this);
rb.setText(title[i]);
rb.setButtonDrawable(android.R.color.transparent);
RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.width = dip2px(this, 100);
params.height = dip2px(this, 50);
rb.setGravity(Gravity.CENTER);
rb.setLayoutParams(params);
rb.setTag(i);
rg.addView(rb);
MyFragment mf = new MyFragment();
Bundle bundle = new Bundle();
bundle.putInt("index", i);
mf.setArguments(bundle);
fraList.add(mf);
}
initModelEvent();
mAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
RadioButton modelTv = (RadioButton) rg.getChildAt(arg0);
int sw = getResources().getDisplayMetrics().widthPixels;
int offest = modelTv.getLeft() - sw/2 + (modelTv.getRight()-modelTv.getLeft())/2;
hSrollview.smoothScrollTo(offest, 0);
}
@Override
public void onPageScrolled(int position, float offest, int offestPixes) {
if(offest == 0){
indicatorParams.setMargins(indicator.getWidth() * position, 0, 0, 0);
}else{
indicatorParams.setMargins((int)(indicator.getWidth()*(position + offest)),0,0,0);
}
indicator.setLayoutParams(indicatorParams);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private void initModelEvent(){
for(int i = 0; i < rg.getChildCount(); i++){
RadioButton rb = (RadioButton) rg.getChildAt(i);
rb.setTag(i);
rb.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
selectModel(position);
viewPager.setCurrentItem(position);
}
});
}
}
private void selectModel(int position){
RadioButton rb = (RadioButton) rg.getChildAt(position);
int sw = getResources().getDisplayMetrics().widthPixels;
int offest = rb.getLeft() - sw/2 + (rb.getRight()-rb.getLeft())/2;
hSrollview.smoothScrollTo(offest, 0);
}
private class MyPagerAdapter extends FragmentPagerAdapter{
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int arg0) {
return fraList.get(arg0);
}
@Override
public int getCount() {
return fraList.size();
}
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 根据手机的分辨率从 px(像素) 的单位 转成为 dp
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
其中主要代码就是ViewPager.setOnPageChangeListener方法啦,原理很简单,根据距离计算指示器indicator的左边距,即时设置就能保证指示器indicator的正确位置了;
然后那个for循环,只是模拟从服务器下来有八个选项卡,这个诸位可以自己根据json调整,主要的就是for循环中的用代码生成RadioButton了,注意要设置RadioButton的宽、高、左右间距、button样式等等都是可以的;
还需要准备同等数量的Fragment用作ViewPager数据源;
在onPageSelected方法里面方法的作用是调整上面的选项卡一直处于当前可见屏幕的范围内,否则滑动到右边的时候,选项卡都找不到了,,找不到了;
initModelEvent这个是设置点击事件啦,和onPageSelected方法类似;代码很简单,同学们自己看看吧。
点击下载