UI TextView菜单模拟按键

最新推荐文章于 2022-10-13 11:33:05 发布

原创最新推荐文章于 2022-10-13 11:33:05 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #android #layout #button #menu #class

Android应用开发同时被 2 个专栏收录

31 篇文章

订阅专栏

UI 界面设计

16 篇文章

订阅专栏

这篇博客介绍了如何在Android中使用TextView来模拟按键效果。通过设置不同背景颜色以区分选中和未选中状态，并利用OnClickListener事件处理实现点击交互。布局文件中将TextView排列成一排，设置相应的点击属性，最终呈现类似按钮的功能。示例代码包括主布局和多个具体视图的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UI TextView菜单模拟按键

布局设置

在Layout_bottom中设置成一排模拟的按键

其中每一个按键实现由一个TextView来模拟，首先Layout_bottom设置的背景为浅蓝色，而TextView在没有选中时，背景图片为空白色，而选中时为深蓝色，从而突出不同的。展示出一个按钮的效果。

TextView实现OnClickListener事件处理，首先要做的处理是在TextView的属性中的clickable设置为true才可以实现OnClickListener事件处理。

最终的效果：

主布局：

<LinearLayout 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:background="@drawable/default_bg"
    android:gravity="bottom"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/layout_top"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_weight="2"
        android:background="@drawable/bottom"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/text_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@android:color/black"
            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="90"
        android:gravity="center"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_bottom"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_weight="30"
        android:background="@drawable/bottom"
        android:baselineAligned="true"
        android:orientation="horizontal" >
		<!-- 只要TextView的clickable设置为true就可以实现图片的OnClick事件处理 -->
        <TextView
            android:id="@+id/text_one"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:clickable="true"
            android:drawableTop="@drawable/bg_tab_call_log_pressed"
            android:gravity="center"
            android:paddingTop="15dp"
            android:text="@string/one"
            android:textSize="20sp"
            tools:ignore="NestedWeights" />

        <TextView
            android:id="@+id/text_two"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:clickable="true"
            android:drawableTop="@drawable/bg_tab_contact_pressed"
            android:focusable="true"
            android:gravity="center"
            android:onClick="onClick"
            android:paddingTop="15dp"
            android:text="@string/two"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/text_three"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:clickable="true"
            android:drawableTop="@drawable/bg_tab_dial_pressed"
            android:focusable="true"
            android:gravity="center"
            android:onClick="onClick"
            android:paddingTop="15dp"
            android:text="@string/three"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/text_four"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:clickable="true"
            android:drawableTop="@drawable/bg_tab_sms_pressed"
            android:focusable="true"
            android:gravity="center"
            android:onClick="onClick"
            android:paddingTop="15dp"
            android:text="@string/four"
            android:textSize="20sp" />

    </LinearLayout>

</LinearLayout>

1,2,3,4Activity的布局相同：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/activity_one"
        android:textSize="24sp" />

</LinearLayout>

主程序：

package com.example.uitest;

import android.os.Bundle;
import android.app.ActivityGroup;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.LinearLayout;
import android.widget.TextView;

@SuppressWarnings("deprecation")
public class UIActivity extends ActivityGroup {
	//声明四个TextView的引用
	private TextView textOne,textTwo,textThree,textFour;
	//声明Layout的引用
	private LinearLayout layout_body;
	//定义标志位，标记当前所处的页面
	private int sateFlag = 0;
	
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ui);
        
        initView();
        //展示初始的视图，主要展现在Layout_body的布局中
        showView(sateFlag);
        //给TextView设置事件监听器，前提是设置TextView的android:clickable的属性为true
        textOne.setOnClickListener(new ViewListener());
        textTwo.setOnClickListener(new ViewListener());
        textThree.setOnClickListener(new ViewListener());
        textFour.setOnClickListener(new ViewListener());
    }
   
    class ViewListener implements OnClickListener{

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()) {
			case R.id.text_one:
				sateFlag = 0;
				showView(sateFlag);
				break;
			
			case R.id.text_two:
				sateFlag = 1;
				showView(sateFlag);
				break;
			case R.id.text_three:
				sateFlag = 2;
				showView(sateFlag);
				break;
			case R.id.text_four:
				sateFlag = 3;
				showView(sateFlag);
				break;
			default:
				break;
			}
		}
    	
    }
    private void initView() {
		layout_body = (LinearLayout)findViewById(R.id.layout_body);
		textOne = (TextView)findViewById(R.id.text_one);
		textTwo = (TextView)findViewById(R.id.text_two);
		textThree = (TextView)findViewById(R.id.text_three);
		textFour = (TextView)findViewById(R.id.text_four);
	}
    
    private void showView(int flag) {
		switch (flag) {
		case 0:
			//call this method to remove all childs view form the viewGroup
			layout_body.removeAllViews();
			//获得要展示的Activity
			View view0 = getLocalActivityManager()
						.startActivity("one", new Intent(UIActivity.this, OneView.class))
						.getDecorView();
			//设置Textview的背景，模拟按键的按下的效果
			textOne.setBackgroundResource(R.drawable.frame_button_background);
			textTwo.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textThree.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textFour.setBackgroundResource(R.drawable.frame_button_nopressbg);
			layout_body.addView(view0);
			break;
		case 1:
			//call this method to remove all childs view form the viewGroup
			layout_body.removeAllViews();
			//获得要展示的Activity
			View view1 = getLocalActivityManager()
						.startActivity("one", new Intent(UIActivity.this, TwoView.class))
						.getDecorView();
			//设置Textview的背景，模拟按键的按下的效果
			textOne.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textTwo.setBackgroundResource(R.drawable.frame_button_background);
			textThree.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textFour.setBackgroundResource(R.drawable.frame_button_nopressbg);
			layout_body.addView(view1);
			break;
		case 2:
			//call this method to remove all childs view form the viewGroup
			layout_body.removeAllViews();
			//获得要展示的Activity
			View view2 = getLocalActivityManager()
						.startActivity("one", new Intent(UIActivity.this, ThreeView.class))
						.getDecorView();
			//设置Textview的背景，模拟按键的按下的效果
			textOne.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textTwo.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textThree.setBackgroundResource(R.drawable.frame_button_background);
			textFour.setBackgroundResource(R.drawable.frame_button_nopressbg);
			layout_body.addView(view2);
			break;
		case 3:
			//call this method to remove all childs view form the viewGroup
			layout_body.removeAllViews();
			//获得要展示的Activity
			View view3 = getLocalActivityManager()
						.startActivity("one", new Intent(UIActivity.this, FourView.class))
						.getDecorView();
			//设置Textview的背景，模拟按键的按下的效果
			textOne.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textTwo.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textThree.setBackgroundResource(R.drawable.frame_button_nopressbg);
			textFour.setBackgroundResource(R.drawable.frame_button_background);
			layout_body.addView(view3);
			break;

		
		}
	}
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_ui, menu);
        return true;
    }

    
}

OneView，TwoView，ThreeView，FourView程序相似

package com.example.uitest;

import android.app.Activity;
import android.os.Bundle;

public class OneView extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.one);
	}
	
}

工程下载地址：http://download.youkuaiyun.com/detail/zhaoshiqing7/4545847