如何在Android上使底部栏[或iPhone等导航栏]像myTubo？

Question

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

感谢您的回答。

Answer 1

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

我写了一篇博文以实现Pied Piper的相同结果，但是使用RadioGroup和RadioButtons。 它是意大利语的，但幸运的是，该代码在国际上都可以找到;）在这里，结果是：

对于更精细的导航栏设计（如原始问题中的那些），我想这只是一个很酷，很漂亮的可绘制对象；）

Answer 2

使用TabActivity可以做到这一点。

需要以下事情...

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

我已经做了一个笑脸屏幕布局。

以下是步骤...

1.你需要TabWidget在你的底部TabHost在RES /布局/ 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.接下来，您将需要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.同样，您将需要具有徽章或任何特殊布局效果的TabSpec的布局，例如，这里我的购物车具有徽章的TabSpec，因此我进行了以下布局，称为：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.最后是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