it-swarm.com.ru

Раздувание AppBarLayout с помощью панели инструментов + TabLayout

В настоящее время у меня есть DrawerLayout в моем main.xml. Есть панель инструментов, обернутая в AppBarLayout, а затем простая LinearLayout для замены фрагментов. 

Один из фрагментов, к которым я перемещаюсь, я хочу, чтобы он содержал TabLayout для ViewPager фрагментов. В настоящее время у меня есть оба из них в файле макета фрагмента, но это приводит к появлению тени между панелью инструментов и вкладкой TabLayout, чего я не хочу. Я также не хочу использовать setElevation (), потому что он не будет работать на устройствах до Lollipop.

Возможным решением было бы накачать AppBarLayout из моего фрагмента, чтобы он содержал обе панели инструментов + вкладки. Однако я не совсем уверен, как это сделать, поэтому любая помощь будет принята с благодарностью. 

Вот мой файл main.xml:

<Android.support.v4.widget.DrawerLayout 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/drawerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.lumivote.lumivote.ui.MainActivity">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/rootLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/appbarlayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

            <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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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

        <LinearLayout
            Android:id="@+id/flContent"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

</Android.support.v4.widget.DrawerLayout>

И вот XML-файл моего фрагмента:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    tools:context="com.alexdao.democracy.ui.candidate_tab.CandidateListFragment">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/myPrimaryColor"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/white" />
</LinearLayout>
24
adao7000

Чтобы решить мою проблему, я добавил панель инструментов, TabLayout и ViewPager в мою функцию MainActivity. 

main_activity.xml:

<Android.support.v4.widget.DrawerLayout 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/drawerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/rootLayout"
        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.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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabLayout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@Android:color/white" />
        </Android.support.design.widget.AppBarLayout>

        <RelativeLayout
            Android:id="@+id/flContent"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

</Android.support.v4.widget.DrawerLayout>

Затем во всех моих фрагментах я устанавливаю видимость для TabLayout и ViewPager программно в onCreateView:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabLayout);
        tabLayout.setVisibility(View.GONE);
        ViewPager mViewPager = (ViewPager) getActivity().findViewById(R.id.viewpager);
        mViewPager.setVisibility(View.GONE);

        return inflater.inflate(R.layout.fragment_layout, container, false);
}

Конечно, во фрагменте с вкладками вы бы хотели установить видимость View.VISIBLE вместо View.GONE.

2
adao7000

Вы можете иметь отдельную панель инструментов для каждого фрагмента. Возможно установить панель инструментов фрагментов как панель действий. Пример кода:

Toolbar toolbar = (Toolbar) v.findViewById(R.id.toolbar);
 ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

Должно быть возможно иметь заголовки, значки и другие вещи ... С его помощью вы можете имитировать тень на устройствах до Lollipop, независимо от того, что у вас есть на них.

12
Sebastian Pakieła

Я изменил решение, заданное bleeding182 , и заставил его работать и для AppBarLayout (чтобы решить проблему, указанную bopa ).

@Override
public void onAttach(Context context) {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        getActivity().findViewById(R.id.appbar).setElevation(0);
    }
    super.onAttach(context);

}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        getActivity().findViewById(R.id.appbar).setElevation(R.dimen.toolbar_elevation);
    }
}

То, что я сделал, это заменил вызов getSupportActionBar (), присвоив ID моему AppBarLayout, а затем вызвав findViewById () для него, а затем вызвав setElevation для его результата. Проверено на API 23.

5
naman1901

У меня была похожая проблема, когда я хотел TabLayout только внутри одного фрагмента.

Без изменения какого-либо другого кода вы можете решить эту проблему, используя onAttach и onDetach внутри вашего фрагмента с TabLayout.

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);

    // todo add some further checks, e.g. instanceof, actionbar != null

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        ((AppCompatActivity) activity).getSupportActionBar().setElevation(0);
    }
}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        ((AppCompatActivity) getActivity()).getSupportActionBar()
                .setElevation(getResources().getDimension(R.dimen.toolbar_elevation));
    }
}

Убедитесь, что на TabLayout установлена ​​одинаковая высота, и все работает отлично! ; D

4
David Medenjak

Вы можете просто добавить TabLayout программно из Fragment, в котором вам нужен TabLayout 

tabLayout = (TabLayout) inflater.inflate(R.layout.tablay, null);
appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appbar);
appBarLayout.addView(tabLayout, new LinearLayoutCompat.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

и удалите TabLayout из AppBar в onDetach ()

@Override
public void onDetach() {
    appBarLayout.removeView(tabLayout);
    super.onDetach();
}
3
Artem_Iens

Подход Artem_lens работал для меня с некоторыми изменениями.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    ...

    mTabLayout = (TabLayout) inflater.inflate(
            R.layout.partial_tab_layout,
            container,
            false);
    mAppBarLayout = (AppBarLayout) getActivity().findViewById(R.id.app_bar);
    mAppBarLayout.addView(mTabLayout,
            new LinearLayoutCompat.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT));

    ...
}

И удаление представления в onDestroyView()

@Override
public void onDestroyView() {
    mAppBarLayout.removeView(mTabLayout);
    super.onDestroyView();
}
1
Gnzlt

Решение простое в XML. Просто добавьте следующий код в ваш AppBarLayout: app:elevation="0dp". Итак, AppBarLayout должен выглядеть так:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:elevation="0dp"
    Android:theme="@style/AppTheme.AppBarOverlay">
0
josecdeveloper