web-dev-qa-db-ja.com

ツールバー+ TabLayoutでAppBarLayoutを拡張する

現在、main.xmlにDrawerLayoutがあります。 AppBarLayoutにラップされたツールバーと、フラグメントを交換する単純なLinearLayoutがあります。

ナビゲートするフラグメントの1つに、フラグメントのViewPagerのTabLayoutを含めます。現在、フラグメントのレイアウトファイルにこれらの両方が含まれていますが、これにより、ツールバーとTabLayoutの間にドロップシャドウが表示されますが、これは望ましくありません。また、Lollipop以前のデバイスでは機能しないため、setElevation（）を使用したくありません。

可能な解決策は、フラグメントから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>
androidandroid-layoutandroid-fragmentsandroid-toolbarandroid-tablayout
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>

次に、すべてのフラグメントで、onCreateViewでプログラムによってTabLayoutとViewPagerの可視性を設定します。

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);
    }
}

私が行ったことは、AppBarLayoutにIDを指定し、その上でfindViewById（）を呼び出し、その結果に対してsetElevationを呼び出すことにより、getSupportActionBar（）の呼び出しを置き換えました。 API 23でテスト済み。

5
naman1901

TabLayoutが1つのフラグメントのすぐ内側にあるという同様の問題がありました。

他のコードを変更せずに、TabLayoutを使用してフラグメント内でonAttachおよびonDetachを使用することにより、これを解決できます。

@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));

onDetach（）でAppBarからTabLayoutを削除します

@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