西木 2013-01-28
当标签很多而不能在一个页面显示时,希望可以通过滑动来显示未显示的标签。这个效果的实现方式有很多,比如:Gallery, TextSwitcher, 自定义View等。本文简单说明通过组合来实现这个效果,先看图片:
实现原理:在HorizontalScrollView中添加View,实现水平滚动。当点击操作时,对View的状态做修改。记录本次点击和上次点击的View,然后切换不同显示状态。
布局代码:
<?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" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="none"> <LinearLayout android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > </LinearLayout> </HorizontalScrollView> <TextView android:id="@+id/displayText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="30dip" android:textStyle="bold" /> </LinearLayout>
主要代码:
import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import android.widget.LinearLayout.LayoutParams; public class MyScrollViewTestActivity extends Activity implements OnClickListener { private TextView displayText; /** * 装载标题的容器 */ private LinearLayout containerLayout; /** * 用于显示的标题 */ private static String[] titles = { "发表文章", "分类管理", "评论管理", "做电子书", "博客设置", "回收站", "我的文档", "红色警戒", "魔兽世界", "DOTA" }; /** * 点击子项后显示的信息 */ private String message; private Button lastButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); displayText = (TextView) findViewById(R.id.displayText); containerLayout = (LinearLayout) findViewById(R.id.container); // 添加标题相关的控件 initViews(); } /** * 初始化视图 */ private void initViews() { Button item; LayoutParams itemParams; for (int i = 0, length = titles.length; i < length; i++) { // 设置按钮属性 item = new Button(this); item.setBackgroundResource(R.drawable.item); item.setShadowLayer(0.5f, 1, 1, Color.GRAY); item.setText(titles[i]); item.setTag(String.valueOf(i)); item.setOnClickListener(this); // 设置布局参数 itemParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); itemParams.gravity = Gravity.CENTER; containerLayout.addView(item, itemParams); } onClick(containerLayout.getChildAt(0)); } @Override public void onClick(View v) { if (lastButton != null) { lastButton.setBackgroundResource(R.drawable.item); } v.setBackgroundResource(R.drawable.item_selected); lastButton = (Button) v; try { // 获得相关信息 message = titles[Integer.valueOf((String) v.getTag())]; } catch (Exception e) { e.printStackTrace(); return; } // 针对不同信息,需要做的操作 Toast.makeText(this, message, Toast.LENGTH_SHORT).show(); displayText.setText(message); } }
说明:
item.xml代码:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/item_normal" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/> <item android:drawable="@drawable/item_selected" android:state_selected="true"/> <item android:drawable="@drawable/item_selected" android:state_pressed="true"/> <item android:drawable="@drawable/item_selected" android:state_focused="true"/> </selector>
图片在附件中可以找到!:)
多说一句:可以把HorizontalScrollView部分单独做成一个View,不同事件给出一定的回调接口,方便代码的重用。本例中的子项是一个Button,也可以是一些View组合而成的控件。当标签的文字比较多时,需要合理使用draw9patch工具来控制显示效果。:)