横向滑动视图HorizontalScrollView精炼详解

一、前期基础知识储备

由于移动设备物理显示空间一般有限，不可能一次性的把所有要显示的内容都显示在屏幕上。所以各大平台一般会提供一些可滚动的视图来向用户展示数据。Android平台框架中为我们提供了诸如ListView、GirdView、ScrollView、RecyclerView等滚动视图控件，这几个视图控件也是我们平常使用最多的。本节内容我们来分析一下横向滚动视图HorizontalScrollView。

HorizontalScrollView是FrameLayout的子类，这意味着你只能在它下面放置一个子控件，这个子控件可以包含很多数据内容。有可能这个子控件本身就是一个布局控件，可以包含非常多的其他用来展示数据的控件。这个布局控件一般使用的是一个水平布局的LinearLayout 。

本节内容使用HorizontalScrollView分为两种情形：

①横向布局视图中放入文字；

②横向布局视图中放入图片

二、上代码，具体实现文字类的横向布局

（1）布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.hscrollview.MainActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#007b12">

        <LinearLayout
            android:id="@+id/horizontalScrollViewItemContainer"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" />
    </HorizontalScrollView>

    <TextView
        android:id="@+id/testTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="TextView_Test" />

</RelativeLayout>

（2）主Activity代码文件

public class MainActivity extends AppCompatActivity
{

    private HorizontalScrollView horizontalScrollView;
    private LinearLayout container;
    private String cities[] = new String[]{"London", "Bangkok", "Paris", "Dubai", "Istanbul", "New York",
                                            "Singapore", "Kuala Lumpur", "Hong Kong", "Tokyo", "Barcelona",
                                            "Vienna", "Los Angeles", "Prague", "Rome", "Seoul", "Mumbai", "Jakarta",
                                            "Berlin", "Beijing", "Moscow", "Taipei", "Dublin", "Vancouver"};
    private ArrayList<String> data = new ArrayList<>();
    private TextView testTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_centerlockhorizontalscrollview);

        bindData();
        setUIRef();
        bindHZSWData();
    }
	//将集合中的数据绑定到HorizontalScrollView上
    private void bindHZSWData()
    {	//为布局中textview设置好相关属性
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 
		ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER;
        layoutParams.setMargins(20, 10, 20, 10);

        for (int i = 0; i < data.size(); i++)
        {
            TextView textView = new TextView(this);
            textView.setText(data.get(i));
            textView.setTextColor(Color.WHITE);
            textView.setLayoutParams(layoutParams);
            container.addView(textView);  
            container.invalidate();  
        }
    }

	//初始化布局中的控件
    private void setUIRef()
    {
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
        container = (LinearLayout) findViewById(R.id.horizontalScrollViewItemContainer);
        testTextView = (TextView) findViewById(R.id.testTextView);
    }
	//将字符串数组与集合绑定起来
    private void bindData()
    {
        //add all cities to our ArrayList
        Collections.addAll(data, cities);
    }

}

运行效果如图：

（3）为HorizontalScrollView中的item设置点击事件

在上面的代码中添加两段代码

    private void bindHZSWData() {
		....
		....
        for (int i = 0; i < data.size(); i++) {
            TextView textView = new TextView(this);
            textView.setText(data.get(i));
            textView.setTextColor(Color.WHITE);
            textView.setLayoutParams(layoutParams);

            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    performItemClick(view);
                }
            });
		....
        }
    }

    private void performItemClick(View view) {
        //------get Display's Width--------
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

        int screenWidth = displayMetrics.widthPixels;

        int scrollX = (view.getLeft() - (screenWidth / 2)) + (view.getWidth() / 2);

        //smooth scrolling horizontalScrollView
        horizontalScrollView.smoothScrollTo(scrollX, 0);

        //additionally we set current center textView data to our testTextView
        String s = "CenterLocked Item: "+((TextView)view).getText();
        testTextView.setText(s);
    }

为了展示显示效果，将每次item中的text设置到界面中，进行显示，运行效果如图：

三、上代码，具体实现图片类的横向布局

（1）主布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.hscrollview.MainActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#007b12">

        <LinearLayout
            android:id="@+id/horizontalScrollViewItemContainer"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" />
    </HorizontalScrollView>
</RelativeLayout>

（2）主Activity代码

public class MainActivity extends AppCompatActivity {

    private HorizontalScrollView horizontalScrollView;
    private LinearLayout container;
    private Integer mImgIds[] = new Integer[]{R.drawable.aa, R.drawable.bb, R.drawable.cc, R.drawable.dd,
            R.drawable.ee, R.drawable.ff, R.drawable.gg, R.drawable.hh, R.drawable.ii, R.drawable.aaa,
            R.drawable.bbb, R.drawable.ccc, R.drawable.ddd,
            R.drawable.eee, R.drawable.fff, R.drawable.ggg, R.drawable.hhh, R.drawable.iii};


    private ArrayList<Integer> data = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bindData();
        setUIRef();
        bindHZSWData();
    }

    private void bindHZSWData() {
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER;
        layoutParams.setMargins(20, 10, 20, 10);

        for (int i = 0; i < data.size(); i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(data.get(i));
            imageView.setLayoutParams(layoutParams);

            container.addView(imageView);
            container.invalidate();
        }
    }

    //初始化布局中定义的控件
    private void setUIRef() {
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
        container = (LinearLayout) findViewById(R.id.horizontalScrollViewItemContainer);
        testTextView = (TextView) findViewById(R.id.testTextView);
    }

    //将字符串数组中的数据加入到集合当中
    private void bindData() {
        //add all cities to our ArrayList
        Collections.addAll(data, mImgIds);
    }
}

运行效果如图：

 

当然了，最简单的运用图片类的HorizontalScrollView，就是直接将图片放置在HorizontalScrollView的子布局中进行显示，只需要一个布局文件进行控制，这样做非常简单，UI是通过布局文件进行控制。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.horizontalscrollview.MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#ff00ff" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#000000" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#b7a500" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#c1070e" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#ff00ff" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#000000" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#b7a500" />

            <ImageView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#c1070e" />

        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>