Android 组合View实现水平滑动效果

当标签很多而不能在一个页面显示时，希望可以通过滑动来显示未显示的标签。这个效果的实现方式有很多，比如：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);
		
	}
}

 说明：

• lastButton：记录上次操作的View，用于操作该View的状态；
• item.xml：用于设置按钮操作的效果，如按下后的状态改变等；
• displayText：当点击某个标签时，用户显示特定信息；

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工具来控制显示效果。：）