您的位置:首页 > 产品设计 > UI/UE

Android 高级UI设计笔记15:HorizontalScrollView之 实现画廊式图片浏览器

2016-04-25 16:53 573 查看
1. HorizontalScrollView

  本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪费,已经在安卓api 19之后被彻底废弃,Google推荐使用ViewPager 或者 HorizontalScrollView来实现Gallery的效果。网上对此的资料太杂,有部分资料写得太高深,完全看不懂。我搞了一个下午,才使用HorizontalScrollView完成画廊式的图片浏览器,如下图:





2. HorizontalScrollView案例:

(1)首先我们来到主布局文件activity_main.xml,如下:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:paddingTop="10dp" />

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scrollbars="horizontal" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>

<TextView
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:text="简介描述"
/>

</LinearLayout>


(2)接下来直接来到主Activity,也就是MainActivity,如下:

 package com.himi.horizontalscrollviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity {

private LinearLayout linearLayout1;
private ImageView imageView1;
private TextView tv;

// 把要显示的图片放到一个图片id数组里面便于操作
private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4,
R.drawable.img5, R.drawable.img6
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获取组件
linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
imageView1 = (ImageView) findViewById(R.id.imageView1);
tv = (TextView)findViewById(R.id.tv);

for (int i = 0; i < imageId.length; i++) {
// 新建一个线性布局
LinearLayout linearLayout = new LinearLayout(this);
// 设置新生成线性布局的参数,宽度为100,高度为匹配父组件,也就是水平滚动视图的高度
LayoutParams layoutParams = new LayoutParams(100,
ViewGroup.LayoutParams.MATCH_PARENT);
// 设置线性布局内的组件水平居中
layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
// 设置新生成的线性布局android:orientation="vertical"
linearLayout.setOrientation(LinearLayout.VERTICAL);
// 应用到新生成的线性布局
linearLayout.setLayoutParams(layoutParams);

// 新建一个图片视图
ImageView imageView = new ImageView(this);
// 这里由于id不能为字符的缘故,所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
imageView.setId(i + 20000);
// 将数组中的第i张图片放到图片视图
imageView.setImageResource(imageId[i]);
// 自动缩放为宽高比
imageView.setAdjustViewBounds(true);
// 图片的高度为80dp
imageView.setMaxHeight(100);
imageView.setPadding(10, 10, 10, 10);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
// 把点击的图片id取出之后,减20000就是要显示的图片在图片数组的位置了。
imageView1.setImageResource(imageId[view.getId() - 20000]);
switch (view.getId() - 20000) {
case 0:
tv.setText("安徽建筑大学南校区大门");
break;
case 1:
tv.setText("安徽建筑大学南校区教学楼,楼下草坪");
break;
case 2:
tv.setText("安徽建筑大学南校区,傍晚的图书馆");
break;
case 3:
tv.setText("安徽建筑大学南校区,易海傍晚的晚霞");
break;
case 4:
tv.setText("健身房的美女,大长腿");
break;
case 5:
tv.setText("健身房的美女,大长腿");
break;
default:
break;
}
}
});

// 将图片视图加载到新生成的线性布局之中
linearLayout.addView(imageView);

// 新生成一个标签文本
TextView textView = new TextView(this);
//textView.setText("图片" + i);
switch (i) {
case 0:
textView.setText("校门");
break;
case 1:
textView.setText("教学楼");
break;
case 2:
textView.setText("图书馆");
break;
case 3:
textView.setText("晚霞");
break;
case 4:
textView.setText("健身房美女");
break;
case 5:
textView.setText("健身房美女");
break;
default:
break;
}

textView.setTextSize(10);
// 标签文本在水平位置居中
textView.setGravity(Gravity.CENTER);
// 添加到新生成的线性布局之后
linearLayout.addView(textView);

//添加到LinearLayout1
linearLayout1.addView(linearLayout);
}

}

}


(3)运行到手机上(HTC),效果如下:

程序刚刚启动的效果如下:







内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: