android 控件之HorizontalScrollView

之前由于工作的原因，需要实现一个类似于网易新闻的标签栏样式的布局，乍眼一看，可以使用Gallery,但是由于Google已经放弃了gallery，所以查阅资料后发现可以使用HorizontalScrollView来实现。今天，就让我们一起来探究一下HorizontalScrollView吧。

话不多说，先上效果图

实现这种效果很简单：

1》利用Google提供的原生的HorizontalScrollView+LinearLayout实现横向滑动

2》点击的时候记录滑动的距离，然后使用scrollTo()方法来实现滑动效果。

在开始实现这个功能之前，我们还是先回顾下HorizontalScrollView的简单用法

1.布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <HorizontalScrollView android:layout_width="wrap_content" android:layout_height="150dp" android:layout_gravity="center_vertical" android:background="#AA444444" android:scrollbars="none" > <LinearLayout android:id="@+id/id_gallery" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:orientation="horizontal" /> </HorizontalScrollView> </LinearLayout> 2.实现代码

public class MainActivity extends Activity { private LinearLayout mGallery; private int[] mImgIds; private LayoutInflater mInflater; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); mInflater = LayoutInflater.from(this); initData(); initView(); } private void initData(){ mImgIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h, R.drawable.l }; } private void initView(){ mGallery = (LinearLayout) findViewById(R.id.id_gallery); for (int i = 0; i < mImgIds.length; i++) { View view = mInflater.inflate(R.layout.activity_index_gallery_item, mGallery, false); ImageView img = (ImageView) view .findViewById(R.id.id_index_gallery_item_image); img.setImageResource(mImgIds[i]); TextView txt = (TextView) view .findViewById(R.id.id_index_gallery_item_text); txt.setText("some info "); mGallery.addView(view); } } } 代码量不多，相信大家都看的懂，这里我就不多做解释了。

那么如何实现上述的功能呢？

还是老规矩，先贴代码

1.布局文件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <HorizontalScrollView android:id="@+id/horizontalScrollView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#555555" android:fadingEdge="@null" android:scrollbars="none"> <LinearLayout android:id="@+id/title_lay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:orientation="vertical"> <LinearLayout android:id="@+id/lay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"/> <ImageView android:id="@+id/img1" android:layout_width="0dp" android:layout_height="4dp" android:layout_gravity="bottom" android:background="#33b5e5" /> </LinearLayout> </HorizontalScrollView> </LinearLayout> 2.实现类

package com.juwang.androidactivity; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.Gravity; import android.view.ViewGroup; import android.view.Window; import android.view.animation.AnimationSet; import android.view.animation.TranslateAnimation; import android.widget.HorizontalScrollView; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RadioButton; import android.widget.RadioGroup; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class MainActivity extends FragmentActivity { private ImageView mImageView; private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离 private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件 private List<Map<String, String>> titleList = new ArrayList<Map<String,String>>(); private RadioGroup myRadioGroup; private int _id = 1000; private LinearLayout layout; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//去标题 setContentView(R.layout.activity_main); initDatas(); initGroup(); } private void initDatas() { Map<String, String> map = new HashMap<String, String>(); map.put("title", "新闻"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "网页"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "体育"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "彩票"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "世界杯"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "国际"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "娱乐"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "军事"); titleList.add(map); map = new HashMap<String, String>(); map.put("title", "更多"); titleList.add(map); } private void initGroup(){ layout = (LinearLayout) findViewById(R.id.lay); mImageView = (ImageView)findViewById(R.id.img1); mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView); myRadioGroup = new RadioGroup(this); myRadioGroup.setLayoutParams( new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); myRadioGroup.setOrientation(LinearLayout.HORIZONTAL); layout.addView(myRadioGroup); for (int i = 0; i <titleList.size(); i++) { Map<String, String> map = titleList.get(i); RadioButton radio = new RadioButton(this); radio.setButtonDrawable(android.R.color.transparent); LinearLayout.LayoutParams l = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER); radio.setLayoutParams(l); radio.setGravity(Gravity.CENTER); radio.setPadding(40, 30, 40, 30); radio.setId(_id+i); radio.setText(map.get("title")); radio.setTextColor(Color.WHITE); radio.setTag(map); if (i == 0) { radio.setChecked(true); int itemWidth = (int) radio.getPaint().measureText(map.get("title")); mImageView.setLayoutParams(new LinearLayout.LayoutParams(itemWidth+radio.getPaddingLeft()+radio.getPaddingRight(),4)); } myRadioGroup.addView(radio); } myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { int radioButtonId = group.getCheckedRadioButtonId(); //根据ID获取RadioButton的实例 RadioButton rb = (RadioButton)findViewById(radioButtonId); Map<String, Object> selectMap = (Map<String, Object>) rb.getTag(); AnimationSet animationSet = new AnimationSet(true); TranslateAnimation translateAnimation; translateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, rb.getLeft(), 0f, 0f); animationSet.addAnimation(translateAnimation); animationSet.setFillBefore(true); animationSet.setFillAfter(true); animationSet.setDuration(300); mImageView.startAnimation(animationSet);//开始上面蓝色横条图片的动画切换 mCurrentCheckedRadioLeft = rb.getLeft();//更新当前蓝色横条距离左边的距离 mHorizontalScrollView.smoothScrollTo((int) mCurrentCheckedRadioLeft - (int) getResources().getDimension(R.dimen.rdo2), 0); //根据标题长度设置下标mImageView的长度 mImageView.setLayoutParams(new LinearLayout.LayoutParams(rb.getRight()-rb.getLeft(),4)); } }); } }

在这里我大致讲解一下实现思路：

1》首先用Linearlayout+HorizontalScrollView实现横向滑动的功能，当然我在Linearlayout里面添加的是RadioGroup,然后通过for循环的形式将RadioButton逐一添加进去。

2》设置GrdioGroup的点击监听事件，获取点击的位置，计算距离左边的距离，然后通过scrollTo进行滑动。当然在进行scrollTo()滑动的时候，首先要判断最初的滑动距离是否小于我们设置的距离，即

(int) getResources().getDimension(R.dimen.rdo2)的值，在头两个RadioButton滑动的时候，由于小于我们设定的值，因此整体不会发生移动，当大于我们设定的值的时候，会整体进行移动。

好了，以上就是对HorizontalScrollView的理解，欢迎大家留言。