Làm các nút trông giống như các tab trong android

Question

Tôi muốn kiểu giao diện này. Họ không có vẻ như tabs vì vậy tôi tin rằng họ là các nút.

tôi có thể đạt được các loại tương tự với toggle button bằng cách giữ một selector trong drawable.

<ToggleButton 
    android:id="@+id/toggleButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal" 
    android:background="@drawable/custom_selector"  
    android:textOn=" Button1 Button2" 
    android:textOff=" Button1 Button2" /> 

Nhưng chúng chỉ có hai giá trị và bằng cách nhấp vào tab đã chọn sẽ chọn giá trị khác và tab hiện tại được chọn. Nhưng tôi muốn chính xác như tab. Vì vậy, ai đó có thể vui lòng giúp tôi đạt được nó? Cảm ơn trước.

Answer 1

Bạn phải tạo chọn cho tất cả các nút và sử dụng RadioGroup với nền chọn và nút rỗng ..

Thực hiện theo @Andru câu trả lời cho tạo Selector ..

Dưới đây là Mã RadioGroup.

<RadioGroup 
    android:id="@+id/rdogrp" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_margin="8dp" 
    android:gravity="center" 
    android:orientation="horizontal" > 

    <RadioButton 
     android:id="@+id/btn1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="0dp" 
     android:background="@drawable/btn1Selector" 
     android:button="@null" 
     android:checked="true" 
     android:gravity="center" /> 

    <RadioButton 
     android:id="@+id/btn2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="0dp" 
     android:background="@drawable/btn2Selector" 
     android:button="@null" 
     android:gravity="center" /> 

    <RadioButton 
     android:id="@+id/btn3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="0dp" 
     android:background="@drawable/btn3Selector" 
     android:button="@null" 
     android:gravity="center" /> 

    <RadioButton 
     android:id="@+id/btn4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="0dp" 
     android:background="@drawable/btn4Selector" 
     android:button="@null" 
     android:gravity="center" /> 
</RadioGroup> 

đây là mẫu mã cho btn1Selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/btn1_selected" android:state_checked="true" /> 
    <item android:drawable="@drawable/btn1_normal" android:state_checked="false"/> 
</selector> 

Answer 2

bạn có thể làm điều gì đó như thế này, thay vì nút chuyển đổi sử dụng các nút thông thường.
nếu nút "dữ liệu" nhấp làm như thế này

data(View v) 
{ 
    databtn.setBackgroundResource(R.drawable.image1); 
    w_chartbtn.setBackgroundResource(R.drawable.image2); 
    H_chartbtn.setBackgroundResource(R.drawable.image2); 
} 

nếu "H-biểu đồ" nút nhấp

H_chart(View v) 
{ 
    databtn.setBackgroundResource(R.drawable.image2); 
    w_chartbtn.setBackgroundResource(R.drawable.image2); 
    H_chartbtn.setBackgroundResource(R.drawable.image1); 
} 

Answer 3

Sử dụng nút đơn giản thay vì nút toogle. Và thiết lập nền như thế này:

Tôi đưa ra ví dụ cho 1 nút:

android:background="@drawable/data_button_select_state" 

và thêm một file xml trong 'drawable' thư mục có tên data_button_select_state của bạn:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
<item android:drawable="@drawable/data_image_selected_state" 
     android:state_selected="true" /> 
<item android:drawable="@drawable/data_image_selected_state" 
     android:state_pressed="true" /> 
<item android:drawable="@drawable/data_image_without_selected" /> 
</selector> 

Bây giờ thêm mã trong tệp java như thế này:

khi nút dữ liệu được nhấp:

data_button.setOnClickListener(new View.OnClickListener() { 

     @Override 
     public void onClick(View v) { 
      data_button.setActivated(true); 
      H_chart_button.setActivated(false); 
          w_chart_button.setActivated(false); 
          hc_chart_button.setActivated(false); 

     } 
    }); 

cũng thay đổi nút khác như thế này. Điều này sẽ có thể giúp bạn ...