如何像Android上的myTubo一样制作Bottom Bar [或类似iPhone的导航栏]？

Question

我正在寻找如何在我的应用程序底部获得类似的条形图，例如Android的MyTubo（或GroupMe）。 像这样：

感谢您的回答。

Answer 1

另外对我来说，在Android中获得类似于iPhone的UITabBarController的好方法包括使用RadioGroup和RadioButtons。这种方法的好处在于你也可以使用Fragment或任何你喜欢的东西，而不仅仅是Intent和Activity。

我写了一个blog post来实现Pied Piper的相同结果，但是使用了RadioGroup和RadioButtons。它是意大利语，但幸运的是，代码在国际上发表;）结果如下：

对于更精细的导航栏设计（如原始问题中的那些），我认为这只是一个很酷且聪明的可绘制问题;）

Answer 2

TabActivity可以实现这一点。

需要以下事情......

底部为TabHost的
1. TabWidget
2. 每个TabSpec
的选择器
3. 具有徽章或任何其他特殊效果的TabSpec布局
4. 最后TabActivity举办Activities和ActivityGoups

我制作了一个微笑屏幕布局。



以下是步骤......

<强> 1。您的res / layout / host.xml中TabWidget添加底部需要TabHost

<?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.接下来，您需要selectors，每个TabSpec一个，这是演示选择器：res / drawable / homeselector.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。此外，您将需要具有徽章或任何特殊布局效果的TabSpecs的布局，例如我的购物车TabSpec有徽章所以我做了以下布局，其中称为： RES /布局/ 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。最后是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);

    }
}

看起来如何......

Answer 3

根据Android的规格，请不要这样做。这是一个iOS惯例，根本无法在Android平台上运行。

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

  

请勿使用底部标签栏

     

其他平台使用底部标签栏在应用程序之间切换   观点。根据平台惯例，Android的视图控制选项卡是   显示在屏幕顶部的操作栏中。此外，   Android应用可以使用底栏显示拆分操作的操作   杆

     

您应遵循此指南以创建一致的体验   与Android平台上的其他应用程序，以避免混淆   Android上的操作和视图切换。

Answer 4

我知道这与问题的答案没有直接关系，但我觉得重要的是提到谷歌似乎改变了他们对使用底栏的想法。（感谢 @milapTank的精彩评论我做了一些挖掘工作）

直到上个月（2016年2月）谷歌说“不要使用底部标签栏” 看看这个缓存页面： https://web.archive.org/web/20160211061655/http://developer.android.com/design/patterns/pure-android.html

目前（2016年3月）他们删除了此笔记，甚至为您添加了一些不错的页面来帮助您完成设计：）

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

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