[Android学UI之四]实现分断Button,模仿MIUI设置页面顶部Button

简介:


功能:

    拼接的Button。


使用说明:

    用RidaoGroup包裹几个RidaoButton,实现拼接。


还是看图,更真实!!!



页面做的比较简单,这个功能也不太难。。这只是其中的实现方式之一。有其它更好的方式,请告之。


下面还是看代码吧:

界面Activity:

package com.bbswp.topbuttondemo;

import com.bbswp.topbuttondemo.view.SegmentedRadioGroup;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity implements OnCheckedChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SegmentedRadioGroup group = (SegmentedRadioGroup) findViewById(R.id.segment_text);
        group.setOnCheckedChangeListener(this);

    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.button_one:
                toast(1);
                break;

            case R.id.button_two:
                toast(2);
                break;

            case R.id.button_three:
                toast(3);
                break;

            default:
                break;
        }

    }

    public void onClick(View view) {
        toast(4);
    }

    private void toast(int id) {
        Toast.makeText(this, "点击:" + id, 0).show();
    }

}



自定义一个View,用于包裹RidaoButton.


看代码:

/*
 * Copyright (C) 2011 Make Ramen, LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.bbswp.topbuttondemo.view;

import com.bbswp.topbuttondemo.R;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RadioGroup;

public class SegmentedRadioGroup extends RadioGroup {

	public SegmentedRadioGroup(Context context) {
		super(context);
	}

	public SegmentedRadioGroup(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		changeButtonsImages();
	}

	private void changeButtonsImages(){
		int count = super.getChildCount();

		if(count > 1){
			super.getChildAt(0).setBackgroundResource(R.drawable.segment_radio_left);
			for(int i=1; i < count-1; i++){
				super.getChildAt(i).setBackgroundResource(R.drawable.segment_radio_mid);
			}
			super.getChildAt(count-1).setBackgroundResource(R.drawable.segment_radio_right);
		}else if (count == 1){
			super.getChildAt(0).setBackgroundResource(R.drawable.segment_radio_button);
		}
	}
}



界面少不了xml。。。看看吧:

<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:orientation="vertical"
    tools:context=".MainActivity" >

    <com.bbswp.topbuttondemo.view.SegmentedRadioGroup
        android:id="@+id/segment_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:checkedButton="@+id/button_one"
        android:gravity="top|center"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@id/button_one"
            android:button="@null"
            android:gravity="center"
            android:minHeight="33dip"
            android:minWidth="40dip"
            android:text="我是第一个"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <RadioButton
            android:id="@+id/button_two"
            android:button="@null"
            android:gravity="center"
            android:minHeight="33dip"
            android:minWidth="40dip"
            android:text="我是第二个"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <RadioButton
            android:id="@+id/button_three"
            android:button="@null"
            android:gravity="center"
            android:minHeight="33dip"
            android:minWidth="40dip"
            android:text="我是第三个"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </com.bbswp.topbuttondemo.view.SegmentedRadioGroup>

    <com.bbswp.topbuttondemo.view.SegmentedRadioGroup
        android:id="@+id/segment_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:checkedButton="@+id/button_one"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/button_four"
            android:button="@null"
            android:gravity="center"
            android:minHeight="33dip"
            android:minWidth="40dip"
            android:onClick="onClick"
            android:text="我是单独的一个"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </com.bbswp.topbuttondemo.view.SegmentedRadioGroup>

</LinearLayout>


这里还有重要的四个drawable文件,用于按下的效果显示:

segment_radio_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"  android:drawable="@drawable/segment_grey" />
    <item android:state_focused="true" android:state_checked="true" android:state_pressed="false" android:drawable="@drawable/segment_grey_focus" />
    <item android:state_focused="true" android:state_checked="false" android:state_pressed="false" android:drawable="@drawable/segment_white_focus" />
    
    <item android:state_pressed="true"  android:drawable="@drawable/segment_grey_press" /> 
    <item android:state_checked="false"  android:drawable="@drawable/segment_white" />
    <item android:drawable="@drawable/segment_grey" />  <!-- default  -->
</selector>


后面是左:

segment_radio_left.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/segment_radio_grey_left_focus" android:state_checked="true" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/segment_radio_white_left_focus" android:state_checked="false" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/segment_radio_grey_left_press" android:state_pressed="true"/>
    <item android:drawable="@drawable/segment_radio_white_left" android:state_checked="false"/>
    <item android:drawable="@drawable/segment_radio_grey_left"/>

</selector>


中:

segment_radio_mid.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_checked="true" android:state_pressed="false" android:drawable="@drawable/segment_radio_grey_middle_focus" />
    <item android:state_focused="true" android:state_checked="false" android:state_pressed="false" android:drawable="@drawable/segment_radio_white_middle_focus" />
    
    <item android:state_pressed="true"  android:drawable="@drawable/segment_radio_grey_middle_press" /> 
    <item android:state_checked="false" android:drawable="@drawable/segment_radio_white_middle" /> 
    <item android:drawable="@drawable/segment_radio_grey_middle" /> 
</selector>


右:

segment_radio_right.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_checked="true" android:state_pressed="false" android:drawable="@drawable/segment_radio_grey_right_focus" />
    <item android:state_focused="true" android:state_checked="false" android:state_pressed="false" android:drawable="@drawable/segment_radio_white_right_focus" />
    
    <item android:state_pressed="true"  android:drawable="@drawable/segment_radio_grey_right_press" /> 
    <item android:state_checked="false" android:drawable="@drawable/segment_radio_white_right" />   
    <item android:drawable="@drawable/segment_radio_grey_right" />

</selector>


用于学习。。还是可以吧。。。


有更好的方式,一起交流吧!!!



代码当然要分享给大家了,一起学习!!!

下载:http://download.csdn.net/detail/hudan2714/4814643




目录
相关文章
|
21天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
14 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
22天前
|
消息中间件 安全 数据处理
Android为什么不能在子线程更新UI
Android为什么不能在子线程更新UI
25 0
|
30天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
2月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
|
3月前
|
Android开发 开发者
Android UI设计: 请解释Activity的Theme是什么,如何更改应用程序的主题?
Android UI设计: 请解释Activity的Theme是什么,如何更改应用程序的主题?
42 1
|
1天前
|
存储 Java Android开发
Android系统 设置第三方应用为默认Launcher实现和原理分析
Android系统 设置第三方应用为默认Launcher实现和原理分析
6 0
|
11天前
|
编解码 Android开发 UED
安卓UI/UX设计原则:打造引人入胜的用户体验
【4月更文挑战第13天】本文探讨了安卓UI/UX设计的关键原则,包括一致性、简洁性、反馈、清晰性、效率和适应性。一致性要求视觉和行为保持一致,利用系统UI;简洁性减少用户行动,简化导航;反馈需即时且明确;清晰性强调表达清晰,布局有序;效率关注性能优化和任务简化;适应性涉及多设备适配和用户多样性。遵循这些原则,可创建出色应用,提供无缝用户体验。设计应持续迭代,适应技术发展和用户需求。
|
14天前
|
XML 移动开发 Android开发
构建高效安卓应用:采用Jetpack Compose实现动态UI
【4月更文挑战第10天】 在现代移动开发中,用户界面的流畅性和响应性对于应用的成功至关重要。随着技术的不断进步,安卓开发者寻求更加高效和简洁的方式来构建动态且吸引人的UI。本文将深入探讨Jetpack Compose这一革新性技术,它通过声明式编程模型简化了UI构建过程,并提升了性能与跨平台开发的可行性。我们将从基本概念出发,逐步解析如何利用Jetpack Compose来创建具有数据动态绑定能力的安卓应用,同时确保应用的高性能和良好用户体验。
15 0
|
16天前
|
XML Java Android开发
Android之UI基础控件
Android之UI基础控件
|
17天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。