Làm thế nào để làm cho Thanh dưới cùng [hoặc Thanh điều hướng như iPhone] như myTubo trên Android?

Question

Tôi đang tìm cách lấy một thanh tương tự ở cuối ứng dụng của tôi như MyTubo (hoặc GroupMe) cho Android. Something như thế này:

Cám ơn câu trả lời của bạn.

Answer 1

Ngoài ra đối với tôi một cách tốt để có được một cái gì đó tương tự như UITabBarController iPhone trong Android bao gồm trong việc sử dụng RadioGroup cộng RadioButtons. Ưu điểm của phương pháp này là bạn cũng có thể sử dụng Fragment hoặc bất cứ thứ gì bạn thích, thay vì chỉ Intent và Activity.

Tôi đã viết blog post để đạt được kết quả tương tự của Pied Piper, nhưng sử dụng RadioGroup và RadioButtons. Ở đây bằng tiếng Ý nhưng, may mắn thay, mã nói trên phạm vi quốc tế;) Ở đây, kết quả:

Thiết kế thanh điều hướng phức tạp hơn (giống như câu hỏi ban đầu), tôi cho rằng đó chỉ là vấn đề dễ sử dụng ;)

Answer 2

Điều này có thể thực hiện được với TabActivity.

nhu cầu điều sau đây ...

1. TabHost với TabWidget ở phía dưới
2. Selectors cho mỗi TabSpec
3. Layouts cho TabSpec có huy hiệu hay bất kỳ hiệu ứng đặc biệt khác
4. Và cuối cùng TabActivity nơi đặt máy chủ Activities và ActivityGoups

Tôi đã tạo một bố cục màn hình khói hơn.

Sau đây là các bước ...

1. Bạn sẽ cần TabWidget ở phía dưới của TabHost của bạn thêm trong res của bạn/layout/host.xml

<?xml version="1.0" encoding="utf-8"?> 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#777777"> 
    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     > 
     <RelativeLayout 
      android:id="@+id/layTab" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:background="@drawable/your_navigatio_tab_background_drawable" 
      android:layout_alignParentBottom="true" 
      android:layout_centerVertical="true" 
      > 
      <TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      /> 
     </RelativeLayout> 
     <FrameLayout 
      android:id="@android:id/tabcontent" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_alignParentTop="true" 
      android:layout_above="@id/layTab"/> 
    </RelativeLayout> 
</TabHost> 

2.Tiếp theo bạn sẽ yêu cầu selectors, một cho mỗi TabSpec của bạn, Dưới đây là trình chọn bản demo: res/drawable/h omeselector.xml

<?xml version="1.0" encoding="UTF-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_selected="false" android:drawable="@drawable/home_image_when_not_selected"/> 
    <item android:state_selected="true" android:drawable="@drawable/home_selected" /> 
</selector> 

3. Ngoài ra, bạn sẽ được yêu cầu bố trí cho TabSpecs rằng có huy hiệu hay bất cứ điều gì bố trí đặc biệt có hiệu lực, đây ví dụ của tôi giỏ TabSpec có huy hiệu vì vậy tôi đã thực hiện bố trí sau đây gọi là: res /layout/cartbottom.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/cartselector" 
    android:gravity="right" 
    > 
<Button 
    android:id="@+id/redbtn" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:layout_alignParentTop="true" 
    android:text="00" 
    android:paddingBottom="3dp" 
    android:gravity="right|center_vertical" 
    android:paddingRight="9dp" 
    android:textSize="11dp" 
    android:textStyle="bold" 
    android:textColor="#ffffff" 
    android:background="@drawable/red_badge_drawable" 
/> 
</RelativeLayout> 

4. Và cuối cùng là TabActivity

package x.y; 

import android.app.TabActivity; 
import android.content.Intent; 
import android.database.DatabaseUtils; 
import android.database.sqlite.SQLiteDatabase; 
import android.graphics.drawable.Drawable; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.ViewGroup.LayoutParams; 
import android.widget.Button; 
import android.widget.ImageView; 
import android.widget.TabHost; 
import android.widget.Toast; 
import android.widget.TabHost.TabSpec; 

public class Host extends TabActivity { 

    public static Button btnRed; // Works as a badge 
           //Declared static; so it can be accessed from all other Activities 
    public static TabHost tabHost; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.host); 

     tabHost = (TabHost)findViewById(android.R.id.tabhost); 

     TabSpec homeTabSpec = tabHost.newTabSpec("tid1"); 
     TabSpec signinTabSpec = tabHost.newTabSpec("tid2"); 
     TabSpec cartTabSpec = tabHost.newTabSpec("tid3"); 
     TabSpec moreTabSpec = tabHost.newTabSpec("tid4"); 
     TabSpec searchTabSpec = tabHost.newTabSpec("tid5"); 

     //Make Intents to your Activities or ActivityGroups 
     Intent intent1 = new Intent(this, Cart.class); 
     Intent intent2 = new Intent(this, Home.class); 
     Intent intent3 = new Intent(this, SignIn.class); 
     Intent intent4 = new Intent(this, Search.class); 
     Intent intent5 = new Intent(this, More.class); 

     LayoutInflater layoutInflater = this.getLayoutInflater(); 
     View layout_with_badge = layoutInflater.inflate(R.layout.cartbottom, null); 
     btnRed = (Button) layout_with_badge.findViewById(R.id.redbtn); 

     String cnt = String.valueOf("0");// Number on the badge 

     btnRed.setBackgroundDrawable(getResources().getDrawable(R.drawable.red_badge_image_drawable)); 

     btnRed.setText(cnt); 
     btnRed.setOnClickListener(new OnClickListener() { 

      //@Override 
      public void onClick(View v) { 
       tabHost.setCurrentTab(2); 
      } 
     }); 

     cartTabSpec.setIndicator(layout_with_badge).setContent(intent1); 

     Drawable d = getResources().getDrawable(R.drawable.homeselector); 
     ImageView img1 = new ImageView(this); 
     img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
     img1.setImageDrawable(d); 
     homeTabSpec.setIndicator(img1).setContent(intent2); 

     d = getResources().getDrawable(R.drawable.signinselector); 
     img1 = new ImageView(this); 
     img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
     img1.setImageDrawable(d); 
     signinTabSpec.setIndicator(img1).setContent(intent3); 

     d = getResources().getDrawable(R.drawable.searchselector); 
     img1 = new ImageView(this); 
     img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
     img1.setImageDrawable(d); 
     searchTabSpec.setIndicator(img1).setContent(intent4); 

     d = getResources().getDrawable(R.drawable.moreselector); 
     img1 = new ImageView(this); 
     img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
     img1.setImageDrawable(d); 
     moreTabSpec.setIndicator(img1).setContent(intent5); 

     /* Add tabSpec to the TabHost to display. */ 
     tabHost.addTab(homeTabSpec); 
     tabHost.addTab(signinTabSpec); 
     tabHost.addTab(cartTabSpec); 
     tabHost.addTab(searchTabSpec); 
     tabHost.addTab(moreTabSpec); 

    } 
} 

Làm thế nào nó trông ...

Answer 3

Thông số kỹ thuật của mỗi Android, vui lòng không làm điều này. Đây là một quy ước iOS và đơn giản là không hoạt động trên nền tảng Android.

http://developer.android.com/design/patterns/pure-android.html

Không sử dụng các thanh tab dưới cùng

nền tảng khác sử dụng thanh tab phía dưới để chuyển qua lại giữa quan điểm của ứng dụng. Theo quy ước nền tảng, tab của Android cho chế độ xem là được hiển thị trong thanh tác vụ ở đầu màn hình thay thế. Ngoài ra, Ứng dụng Android có thể sử dụng thanh dưới cùng để hiển thị các hành động trên một thanh tác vụ phân tách .

Bạn nên làm theo hướng dẫn này để tạo trải nghiệm nhất quán với các ứng dụng khác trên nền tảng Android và để tránh nhầm lẫn giữa các hành động và chế độ xem chuyển đổi trên Android.

Answer 4

Tôi biết nó không liên quan trực tiếp đến câu trả lời của câu hỏi, nhưng tôi cảm thấy điều quan trọng là kể rằng có vẻ như google đã thay đổi suy nghĩ của họ về sử dụng các thanh đáy. (Cám ơn những nhận xét rực rỡ từ @ milapTank tôi đã làm một số digging)

cho đến tháng trước (tháng 2 năm 2016) google đã nói "không sử dụng dưới tab thanh" kiểm tra trang này cache: https://web.archive.org/web/20160211061655/http://developer.android.com/design/patterns/pure-android.html

hiện

(tháng 3 năm 2016) họ đã xóa ghi chú này và thậm chí thêm bạn một số Trang ce để giúp bạn với thiết kế :)

http://developer.android.com/design/patterns/pure-android.html

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-behavior