如图:
测试的布局采用的HorizontalScrollView、RadioGroup和RadioButton组成,ImageView(下面的那个红线条)因为不考虑动态添加标题的个数。
布局文件如下,样式包含基本的控件属性和一个按下选中效果的状态,ImageView外面用的LinearLayout包裹,要不然会上面的RadioGroup里面的控件就都不能显示:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/test_horizescroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdge="@null"
android:scrollbars="none" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/test_horizescroll_radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@android:color/holo_green_dark"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育1" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育2" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育3" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育4" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育5" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育6" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育7" />
<RadioButton
style="@style/title_radiobutton_style"
android:text="体育8" />
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/test_horizescroll_bottom_imgview"
android:layout_width="wrap_content"
android:layout_height="4dp"
android:layout_gravity="bottom"
android:background="#B6192C" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
用RadioGroup主要是因为它的一个可以选中子类的方法:getChildAt(),然后就是蛋疼的实例化控件,代码如下:
public class TestActivity extends Activity{
private ImageView mImageViewUnderLine;//下划线
private int mCurrentCheckedRadioLeft;// 当前被选中的RadioButton距离左侧的距离
private RadioGroup radioGroup;
private HorizontalScrollView mHorizontalScrollView;// 上面的水平滚动控件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.pagehome_main_layout);
inint();
}
/** 控件的实例 **/
public void inint() {
// 控件的实例
mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.test_horizescroll_view);
radioGroup = (RadioGroup)findViewById(R.id.test_horizescroll_radiogroup);
mImageViewUnderLine = (ImageView)findViewById(R.id.test_horizescroll_bottom_imgview);
// 默认选中第一个
RadioButton radioBtnOne = (RadioButton) radioGroup.getChildAt(0);
radioBtnOne.toggle();
//初始化当前被选中的RadioButton距离左侧的距离
mCurrentCheckedRadioLeft = radioBtnOne.getLeft();
//计算红色下滑条的长度
int ImgViewLineweight = (int) (radioBtnOne.getPaint().measureText(
radioBtnOne.getText().toString())
+ radioBtnOne.getPaddingLeft() + radioBtnOne.getPaddingRight() + radioGroup
.getPaddingLeft());
mImageViewUnderLine.setLayoutParams(new LinearLayout.LayoutParams(ImgViewLineweight, 4));
//RadioGroup 子类的监听点击
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup arg0, int arg1) {
//获得当前选中的的子类RadioButton
int checkBtnId = radioGroup.getCheckedRadioButtonId();
RadioButton radioBtn = (RadioButton)TestActivity.this.findViewById(checkBtnId);
// 下滑条移动
int leftSpace = radioBtn.getLeft();
int rightSpace = radioBtn.getRight();
//控制下滑条的移动和长度的计算
imglineAnima(leftSpace, rightSpace);
}
});
}
/** 下滑条移动动画 */
public void imglineAnima(int leftSpace, int rightSpace) {
//点击过后重新计算当前被选中的RadioButton距离左侧的距离
mCurrentCheckedRadioLeft = leftSpace;
//水平滚动条的滚动距离:smoothScrollTo(宽度,高度)
mHorizontalScrollView.smoothScrollTo((int) (mCurrentCheckedRadioLeft -100), 0);
mImageViewUnderLine.setLayoutParams(new LinearLayout.LayoutParams(
rightSpace - leftSpace, 4));
// 下滑条移动效果就是移动动画
AnimationSet animaSet = new AnimationSet(true);
TranslateAnimation tranlateAnima = new TranslateAnimation(
mCurrentCheckedRadioLeft, leftSpace, 0, 0);
animaSet.setDuration(300);
animaSet.setFillAfter(true);
animaSet.setFillBefore(true);
animaSet.addAnimation(tranlateAnima);
mImageViewUnderLine.startAnimation(animaSet);
}
}
其实主要就是背景条的动画移动和水平滚动条的移动距离计算。