Intereting Posts

Как настроить Android TabLayout в нижней части экрана?

Это мой первый раз на Stack Over, поэтому, пожалуйста, со мной. Мой вопрос заключается в том, как я могу настроить новый вкладка TabLayout для дизайна Android в нижней части экрана, наподобие нижней панели инструментов Instagram. Если вы никогда не видели пользовательский интерфейс Instagram, это скриншот об этом . Если есть лучший способ приблизиться к этому, пожалуйста, не стесняйтесь публиковать его здесь (с возможным примером кода), я буду очень благодарен.

Вот мой код: activity_main.xml

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

Я пробовал много методов и обходных решений, предложенных сообществом Stack Overflow, но никто не работает с этой новой реализацией вкладок в android. Я знаю, что этот дизайн пользовательского интерфейса не соответствует правилам проектирования Android, поэтому, пожалуйста, не комментируйте его. Этот дизайн пользовательского интерфейса имеет жизненно важное значение для UX моего приложения, и я был бы признателен за получение ответа на него. Спасибо!

Solutions Collecting From Web of "Как настроить Android TabLayout в нижней части экрана?"

Я считаю, что у меня есть самое простое решение. Используйте LinearLayout и установите высоту для viewpager равным 0dp с layout_weight = "1". Убедитесь, что LinearLayout имеет ориентацию по вертикали и что просмотрщик приходит перед TabLayout. Вот как выглядят мины:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <include layout="@layout/toolbar" android:id="@+id/main_toolbar"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/white"/> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue" /> </LinearLayout> 

И в качестве бонуса вы должны создать свою панель инструментов только один раз как toolbar.xml. Таким образом, все, что вам нужно сделать, это использовать тег include. Делает ваш макет более чистым. Наслаждайтесь!

toolbar.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

Обновление 11.2.2016: Для тех из вас, кто не знает, как надуть панель инструментов, вот как. Убедитесь, что ваша активность расширяет AppCompatActivity, поэтому вы можете вызвать setSupportActionBar () и getSupportActionBar ().

 Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

У меня была такая же проблема на Android Studio 2.2. Это то, что я сделал,

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:subtitleTextColor="@color/color_white" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:title="@string/call_log" app:titleTextColor="@color/color_white" /> <RelativeLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/tabLayout" /> <android.support.design.widget.TabLayout android:layout_alignParentBottom="true" android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize"/> </RelativeLayout> </LinearLayout> 

Лучше разделите оба AppBarLayout и tabLayout, как мой код ниже. Таким образом вы можете самостоятельно изменить панель вкладок и просматривать свойства пейджера.

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:layout_above="@+id/tabs"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" android:layout_alignParentBottom="true"/> </RelativeLayout> </android.support.design.widget.CoordinatorLayout> 

Замените код TabLayout на этот

 <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:elevation="2dp" />