android 控件之HorizontalScrollView

最新推荐文章于 2025-02-06 12:13:20 发布

行走中的云

最新推荐文章于 2025-02-06 12:13:20 发布

阅读量501

点赞数

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/qq_27970997/article/details/70172686

版权

Android 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用HorizontalScrollView替代废弃的Gallery，来实现类似网易新闻的标签栏布局。通过结合LinearLayout，记录并调整滑动距离，实现了点击滑动效果。文中详细解释了布局文件的设置和实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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