一、前期基础知识储备
由于移动设备物理显示空间一般有限,不可能一次性的把所有要显示的内容都显示在屏幕上。所以各大平台一般会提供一些可滚动的视图来向用户展示数据。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>