Дизайн пользовательского интерфейса приложения для Android: WhatsApp как вкладки

Как изменить ширину одной вкладки в TabLayout? установка app:tabMode="scrollable" в макете xml изменит ширину всех элементов вкладки. Но я хочу изменить ширину отдельных элементов вкладки или, если быть точным, первого элемента вкладки.

Хорошим примером того, что я пытаюсь сделать, является вкладка камеры на главном экране WhatsApp. Ширины этой вкладки достаточно, чтобы показать значок.

Как я могу добиться того же результата? Вкладки главного экрана WhatsApp

Ниже мой макет xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.myapplication.WolfApp">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ffffff">

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

android android-layout whatsapp ui-design
person WOLF.L    schedule 06.08.2017    source источник
comment
Вы нашли решение для этого?   -  person Arunkrishna    schedule 23.02.2018
comment
См. stackoverflow.com/a/44983608/4332048.   -  person Arunkrishna    schedule 23.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

Не ответ на ваш вопрос, но я только что декомпилировал apk WhatsApp и нашел здесь файл макета, который, как я думаю, относится к домашнему экрану:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@id/root_view" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:whatsapp="http://schemas.android.com/apk/res-auto">
    <FrameLayout android:id="@id/camera_frame" android:layout_width="fill_parent" android:layout_height="fill_parent" />
    <LinearLayout android:orientation="vertical" android:fitsSystemWindows="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <RelativeLayout android:id="@id/call_notification" android:background="@drawable/call_duration_bar_background" android:paddingLeft="16.0dip" android:paddingTop="8.0dip" android:paddingRight="16.0dip" android:paddingBottom="8.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textSize="17.0sp" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tap_to_return_to_call" android:layout_toLeftOf="@id/call_notification_timer" android:layout_alignParentLeft="true" />
            <TextView android:textSize="16.0sp" android:textColor="@android:color/white" android:gravity="center_vertical" android:id="@id/call_notification_timer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textAllCaps="true" />
        </RelativeLayout>
        <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <FrameLayout android:id="@id/pager_holder" android:paddingTop="0.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <view android:id="@id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent" class="com.whatsapp.HomeActivity$TabsPager" />
            </FrameLayout>
            <LinearLayout android:orientation="vertical" android:id="@id/header" android:background="?colorPrimary" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <include layout="@layout/toolbar" />
                <com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />
            </LinearLayout>
            <FrameLayout android:id="@id/search_holder" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab" android:background="@drawable/input_circle_green" android:layout_width="@dimen/submit_button_size" android:layout_height="@dimen/submit_button_size" android:layout_margin="16.0dip" android:scaleType="center" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab_aux" android:background="@drawable/input_circle_grey" android:visibility="gone" android:layout_width="46.0dip" android:layout_height="46.0dip" android:layout_marginRight="21.0dip" android:layout_marginBottom="88.0dip" android:scaleType="center" android:contentDescription="@string/menuitem_new_text_status" />
        </FrameLayout>
    </LinearLayout>
    <FrameLayout android:id="@id/preview_container" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</FrameLayout>

Я думаю, что линия,

<com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />

Является ли макет вкладок, который вы указали в вопросе.

Также есть еще один файл макета, который содержит пользовательский вид для заголовка вкладки. Заголовок вкладки в WhatsApp имеет значки для счетчика сообщений, пропущенных вызовов и т. д.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="48.0dip" android:animateLayoutChanges="true">
        <TextView android:textSize="14.0sp" android:textStyle="bold" android:textColor="@android:color/white" android:ellipsize="end" android:id="@id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1.0" android:textAllCaps="true" />
        <TextView android:textSize="11.0sp" android:textStyle="bold" android:textColor="@color/primary" android:ellipsize="end" android:gravity="center" android:layout_gravity="center_vertical" android:id="@id/badge" android:background="@drawable/tab_badge_background_inactive" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:minWidth="16.0dip" android:singleLine="true" />
        <ImageView android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </LinearLayout>
</FrameLayout>

Я хочу сказать, что может быть не так просто получить то, что вы ищете. WhatsApp сделал это, используя настраиваемые представления и настраиваемый макет вкладок.

Если кто-нибудь знает более простое решение, это было бы здорово.

person Nishin Raj    schedule 06.08.2017
comment
Не решил проблему, но, по крайней мере, теперь я знаю, как искать ответ - person WOLF.L; 06.08.2017

arrow_upward

arrow_downward

person    schedule
comment
Я добавил свой код макета, пожалуйста, посмотрите на него и скажите, как это сделать - person WOLF.L; 06.08.2017