[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




目录
相关文章
|
22天前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
66 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
174 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
24天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
54 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
109 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
43 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
4月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
74 2
|
6月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
141 1
|
6月前
|
Android开发
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
本文介绍了 `SpannableString` 在 Android 开发中的强大功能,包括如何在单个字符串中应用多种样式,如颜色、字体大小、风格等,并提供了详细代码示例,展示如何设置文本颜色、添加点击事件等,助你实现丰富文本效果。
397 3

热门文章

最新文章

  • 1
    【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
    55
  • 2
    android FragmentManager 删除所有Fragment 重建
    25
  • 3
    Android实战经验之Kotlin中快速实现MVI架构
    39
  • 4
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
    40
  • 5
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    43
  • 6
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    152
  • 7
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    50
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    66
  • 9
    Android历史版本与APK文件结构
    169
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    54