Как сделать нижний бар [или навигационную панель, такую ​​как iPhone], как myTubo на Android?

Ответ 1

Также для меня хороший способ получить что-то похожее на iPhone UITabBarController в Android состоит в использовании RadioGroup plus RadioButtons. Хорошим из этого подхода является то, что вы также можете использовать Фрагмент или что угодно, а не только Intent и Activity.

Я написал сообщение в блоге, чтобы добиться того же результата Pied Piper, но с помощью RadioGroup и RadioButtons. Это по-итальянски, но, к счастью, код говорит на международном уровне;) Вот результат:

Для более продуманного дизайна навигационной панели (например, в оригинальном вопросе), я полагаю, что это только вопрос прохладного и умного вытягиваемого;)

Ответ 2

Это возможно с помощью TabActivity.

Требуется следующее:

• TabHost с TabWidget внизу
• Селекторы для каждого TabSpec
• Макеты для TabSpec, имеющие значок или любые другие специальные эффекты
• И, наконец, TabActivity, который размещает Activities и ActivityGoups

Я сделал один макет экрана smiler.

Ниже приведены шаги...

1. Вам понадобится TabWidget в нижней части вашего TabHost добавить в ваш res/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.Next вам потребуется 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 имеет значок, поэтому я сделал следующий макет, который вызвал: Рез/макет/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);

    }
}

Как выглядит...

Ответ 3

В Android-спецификациях пожалуйста не делайте этого. Это соглашение iOS и просто не работает на платформе Android.

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

Не используйте нижние панели вкладок

Другие платформы используют нижнюю панель вкладок для переключения между Просмотры. В соответствии с соглашением о платформе вкладки Android для управления представлением вместо этого отображаются в полосах действий в верхней части экрана. К тому же, Приложения для Android могут использовать нижнюю панель для отображения действий по раздельному действию бар.

Вы должны следовать этому руководству, чтобы создать последовательный опыт с другими приложениями на платформе Android и во избежание путаницы между действия и просмотр на Android.

Ответ 4

Я знаю, что это не связано непосредственно с ответом на вопрос, но я считаю, что важно упомянуть, что, похоже, Google изменил свое мнение относительно использования нижних баров. (Спасибо за блестящий комментарий от @milapTank я сделал рытье)

до последнего месяца (февраль 2016) google говорил: "Не используйте нижние панели с вкладками" проверьте эту кешированную страницу: https://web.archive.org/web/20160211061655/http://developer.android.com/design/patterns/pure-android.html

в настоящее время (март 2016 г.) они удалили эту заметку и даже добавили вам приятную страницу, чтобы помочь вам в разработке:)

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

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