android 控件之HorizontalScrollView

来源：互联网发布：angularjs ng show js 编辑：程序博客网时间：2024/04/28 23:29

之前由于工作的原因，需要实现一个类似于网易新闻的标签栏样式的布局，乍眼一看，可以使用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的理解，欢迎大家留言。

0 0