RadioButton 左側顯示文字,右側顯示按鈕時文字不靠邊的問題解決
專案中有一個這樣的需求:
下面三行點選某行即選中,顏色變深。自然的想到使用RadioButton因此決定使用RadioButton和RadioButton實現。
1、RadioButton實現上述效果
這個是RadioButton的實現:首先android:button="@null",這個用於隱藏RadioButton預設的按鈕;android:drawableRight="@drawable/selector_tb"這個用於顯示自己定義的按鈕,也就是上圖右側的按鈕,當然,如果在左側,你可以設定android:drawableLeft="@drawable/selector_tb"等;然後就是文字的屬性。這樣就設定完畢了。android:drawableRight="@drawable/selector_tb"中的selector_tb是一個選擇器,程式碼如下:<RadioButton android:id="@+id/rbAll" android:layout_width="match_parent" android:layout_height="wrap_content" android:button="@null" android:drawableRight="@drawable/selector_tb" android:text="測試條目一" android:textColor="@android:color/primary_text_light" android:textSize="14sp" />
完整的程式碼如下:<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_rb_press" android:state_checked="true" /> <item android:drawable="@drawable/ic_rb_unpress" android:state_checked="false" /> </selector>
佈局檔案activity_main.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" android:background="@android:color/white" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <RadioGroup android:id="@+id/rgRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:orientation="vertical" > <RadioButton android:id="@+id/rbAll" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:button="@null" android:drawableRight="@drawable/selector_tb" android:text="測試條目一" android:textColor="@android:color/primary_text_light" android:textSize="14sp" /> <RadioButton android:id="@+id/rbLimit" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:button="@null" android:drawableRight="@drawable/selector_tb" android:text="測試條目二" android:textColor="@android:color/primary_text_light" android:textSize="14sp" /> <RadioButton android:id="@+id/rbNone" android:layout_width="match_parent" android:layout_height="wrap_content" android:button="@null" android:drawableRight="@drawable/selector_tb" android:text="測試條目三" android:textColor="@android:color/primary_text_light" android:textSize="14sp" /> </RadioGroup> </LinearLayout>
MainActivity.java:
public class MainActivity extends Activity implements OnCheckedChangeListener {
private RadioGroup rgRight;
private RadioButton rbAll, rbLimit, rbNone;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rgRight = (RadioGroup) findViewById(R.id.rgRight);
rgRight.setOnCheckedChangeListener(this);
rbAll = (RadioButton) findViewById(R.id.rbAll);
rbLimit = (RadioButton) findViewById(R.id.rbLimit);
rbNone = (RadioButton) findViewById(R.id.rbNone);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rbAll:
radioButtonInit();
rbAll.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
break;
case R.id.rbLimit:
radioButtonInit();
rbLimit.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
break;
case R.id.rbNone:
radioButtonInit();
rbNone.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
break;
default:
break;
}
}
private void radioButtonInit() {
rbAll.setTextColor(getResources().getColor(android.R.color.primary_text_light));
rbLimit.setTextColor(getResources().getColor(android.R.color.primary_text_light));
rbNone.setTextColor(getResources().getColor(android.R.color.primary_text_light));
}
}
2、問題
上面的程式碼執行後效果如下:
上面的Hello world!是居左的,但是下面的文字卻怎麼都不能靠邊。試了各種方法都不行。
最後,無意中給RadioButton新增一個backgroud屬性即可:
<RadioButton
android:id="@+id/rbAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:text="測試條目一"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
最後實現了所需效果。
3、總結
雖然效果實現了,但是這個問題一直不明白為什麼,懷疑可能是RadioButton沒有真正的match_parent。因此寫了下面的測試程式碼:
<RadioGroup
android:id="@+id/rgRight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="vertical" >
<RadioButton
android:id="@+id/rbAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:text="測試條目一"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
<RadioButton
android:id="@+id/rbAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:paddingLeft="0dp"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:text="測試條目一"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
<RadioButton
android:id="@+id/rbLimit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:paddingLeft="4dp"
android:text="測試條目二"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
<RadioButton
android:id="@+id/rbNone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:padding="0dp"
android:text="測試條目三"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
<RadioButton
android:id="@+id/rbNone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:button="@null"
android:drawableRight="@drawable/selector_tb"
android:text="測試條目三"
android:textColor="@android:color/primary_text_light"
android:textSize="14sp" />
</RadioGroup>
執行後效果如下:
相關推薦
RadioButton 左側顯示文字,右側顯示按鈕時文字不靠邊的問題解決
專案中有一個這樣的需求: 下面三行點選某行即選中,顏色變深。自然的想到使用RadioButton因此決定使用RadioButton和RadioButton實現。 1、RadioButton實現上述效果 <RadioButton
ifram 實現左側選單,右側顯示內容
一般都是左側的導航欄中的a標籤中寫一個target(a標籤有target屬性), 右側的div標籤中寫一個iframe,在iframe中有name的屬性,在左側a標籤中的target寫上iframe中name的屬性值。具體操作如下: 1、設定選單(a標籤增加target屬性,值填寫iframe的name值
Easyui 繫結左側選單,右側顯示內容,動態新增多個tab
老規矩還是先上圖看效果:左側選單,右側展示內容以及title 接著看前臺jsp程式碼:前臺程式碼很簡單,按照官方的要求寫就可以,重點是紅色框裡別忘了加最後一步就是js繫結事件在這裡我給出程式碼需要的同學直接copy,這裡是onclick()點選事件,資料為測試資料,替換自己真
vue側邊欄導航,右側顯示對應內容
最終效果 點選下一個導航,上一個導航自動收回 實現程式碼 1.下載vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue
首頁顯示中,明明設定了overflow,文字還是溢位了?怎麼破?!
關於文字溢位的神坑 前端頁面顯示時,文字部分的文字如果太多,有可能會導致文字溢位,大大影響頁面的美觀度。本人在虛擬機器上做一個個人部落格時,遇到一個很詭異的問題,跟大家分享一下。 本來要這樣的效果: 結果卻得到了這樣的效果: 本人反應機敏,認為出現這種問題的原因很可能是css檔案中沒
linux php 圖片新增文字,字型格式問題導致文字不顯示
在使用imagettfbbox()方法給圖片新增文字的時候,發現有些字型能顯示,有些字型不能顯示。 原本字型是otf格式,ttf格式就可以了 網上說linux支援ttf格式,不支援otf格式字型,但是有些otf沒有問題,思源黑體otf不能,只能轉ttf 不知道為什麼,有大神解釋下嗎
單行溢位文字,用...顯示效果
效果圖: 最開始的效果 程式碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字溢位</t
通過js實現得到焦點時文字框清空,失去焦點時又顯示預設文字,值發生改變時不再恢復預設文字?
<input type="text"value="我是預設值"onblur="if(this.value==''){this.value='我是預設值'}"onfocus="if(this.value=='我是預設值'){this.value=''}"/>
bootstrap 模態框顯示時點選遮罩層禁止關閉,點選按鈕時關閉模態框。
1.頁面載入完成時彈出模態框: 首先要在HTML中新增:aria-hidden="true" data-backdrop="static" $(function(){ $('.modal').mo
iOS 開發中tabBarItem不顯示文字,只顯示圖片,且圖片居中顯示
//第一頁 HomePageViewController *homePageVC = [[HomePageViewControlleralloc] init]; UINavigationCon
ios 開發中,如何設定 uitabbar 裡面 tabbaritem 不顯示文字,只顯示圖片,圖片垂直居中?
// 矯正TabBar圖片位置,使之垂直居中顯示 CGFloat offset = 5.0; for (UITabBarItem *item in self.tabbar.items) { item.imageInsets = UIEdgeInsetsMake(offset, 0, -offset,
設定多行文字超出顯示省略號,在手機端超出部分無法隱藏解決方法
方法一: 跨瀏覽器相容的方案 比較靠譜簡單的做法就是設定相對定位的容器高度,用包含省略號(…)的元素模擬實現; p{ position:relative; line-height:1.4
css顯示兩行或多行文字,再顯示省略號
<style type="text/css"> text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width; 300px; h
解決echarts餅圖顯示百分比,和顯示內容字體及大小
fonts mat 好的 pan har tle title log option // 基於準備好的dom,初始化echarts實例 var pieEchart = echarts.init(document.getElementById(‘pi
問題8:手機端實現點擊按鈕時更換顏色(解決IOS不顯示背景)
asc style cti focus 作用 cit art OS div CSS: .sval:active, .sval:focus{ background: #999;color:#fff;opacity:50; } 在觸屏上,:hover和:acti
VS2015編寫的MFC上位機,波特率可調,可動態顯示曲線,可顯示三維
coo app all hold content flow hid har oid VS2015編寫的MFC上位機,波特率可調,可動態顯示曲線,可顯示三維 2016年01月14日 11:40:28 博博有個大大大的Dream 閱讀數:9375 版權
bootstrap table表格資訊過長顯示省略,懸停顯示詳細資訊
需求:由於個別列資訊過長,導致整個表格顯示很不美觀,需要將表格設定成固定寬度,超出部分顯示省略號,滑鼠懸停顯示全部資訊。 如果只看結果,可略過以下文字部分,直接按照紅色文字步驟進行: 首先想到的是html的title樣式,當然也是最適合的,但是由於bootstrap ta
css實現兩欄佈局,左側固定寬,右側自適應的七種方法
一個面試會問的問題,如何實現兩個盒子,左側固定寬度,右側自適應。 下面是實現的其中方法: 1、利用 calc 計算寬度的方法 css程式碼如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&
常見前端佈局問題 (一)左側固定寬度,右側自適應
1,左邊固定寬度,右邊自適應 1-1,父元素display:table,子元素display:table-cell,設定固定寬度(常用) 1-2,固定寬度div左浮動,自適應div margin-left等於固定寬度 1-3,定位,固定寬度div絕對定位abso
電腦win7開機之後黑屏,只顯示滑鼠,如何顯示桌面
1、首先按Ctrl+Alt+Delete鍵,點選‘啟動工作管理員’; 2、點選‘檔案’->‘新建執行任務’,輸入:control 進入控制面板選項,或者輸入:control userpass