如何在Tabs Layout中的屏幕上设置FloatingActionButton?

时间:2017-04-06 09:47:39

标签: android fragment

在我的应用程序中,我想在Tab的布局中在屏幕上设置FloatingActionButton。

The FloatingActionButton want to set like this

在我的项目中,我首先创建了TabLayout和ViewPager,并在最后一个FloatingActionButton中创建了类似图像

visit_tab.xml

    <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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.Weal.sachin.omcom.TabFragment"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs_visit"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabTextColor="#000"
        style="@style/Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Large"
        app:tabSelectedTextColor="#fff"
        android:background="#c64c24"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_visit"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab111"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_gravity="bottom|end"
        android:backgroundTint="@color/cardview_dark_background"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"/>
</LinearLayout>

Visit_tab.java

    package com.Weal.sachin.omcom;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class VisitTab extends Fragment {
    public static TabLayout tabLayout;
    public static ViewPager viewPager;
    public static int int_items = 3 ;
    android.support.v4.app.FragmentManager mFragmentManager;

    View view;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        getActivity().setTitle("Visit");

        GetCurrentGPSLocation gps = new GetCurrentGPSLocation(getActivity());
        if (gps.canGetLocation()) {

            // \n is for new line

        }else {
            // can't get location
            // GPS or Network is not enabled
            // Ask user to enable GPS/network in settings
            gps.showSettingsAlert();
        }
        View x =  inflater.inflate(com.Weal.sachin.omcom.R.layout.activity_visit_tab,null);
        tabLayout = (TabLayout) x.findViewById(com.Weal.sachin.omcom.R.id.sliding_tabs_visit);
        viewPager = (ViewPager) x.findViewById(com.Weal.sachin.omcom.R.id.viewpager_visit);
        viewPager. setOffscreenPageLimit(3);


        viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        FloatingActionButton fab = (FloatingActionButton)x.findViewById(R.id.fab111);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentTransaction t = getFragmentManager().beginTransaction();
                Add_Visit mFrag = new Add_Visit();
                t.replace(R.id.framelayout, mFrag);
                t.commit();
            }
        });

        tabLayout.setupWithViewPager(viewPager);


        return x;

    }
    class MyAdapter extends FragmentPagerAdapter {
        com.Weal.sachin.omcom.TodayVisit TodayVisit;
        Home home;
        UpdatesFragment UpdatesFragment;
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position)
        {
            switch (position){
                case 0 : return new TodayVisit();
                case 1 : return new YesterdayVisit();
                case 2 : return new AllVisit();
            }
            return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */

        @Override
        public CharSequence getPageTitle(int position) {

            switch (position){
                case 0 :
                    return "Today";
                case 1 :
                    return "Yesterday";
                case 2 :
                    return "Visit All";
            }
            return null;
        }
    }

}

在这个xml文件中,floatinActionButton显示完美,但它取代了ViewPager,但我想在ViewPager上设置floatinActionButton。

3 个答案:

答案 0 :(得分:0)

得到了解决方案: -

xml visit_tab.xml

中的变化不大
<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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.Weal.sachin.omcom.TabFragment"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs_visit"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabTextColor="#000"
        style="@style/Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Large"
        app:tabSelectedTextColor="#fff"
        android:background="#c64c24"/>
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_visit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab111"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_gravity="bottom|end"
            android:backgroundTint="@color/cardview_dark_background"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_input_add"/>
        </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

答案 1 :(得分:0)

用这个替换你的布局:

<RelativeLayout 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:layout_height="match_parent"
                android:orientation="vertical"
                tools:context="com.Weal.sachin.omcom.TabFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs_visit"
            style="@style/Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Large"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#c64c24"
            app:tabSelectedTextColor="#fff"
            app:tabTextColor="#000"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_visit"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/white"/>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab111"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/fab_margin"
        android:backgroundTint="@color/cardview_dark_background"
        android:src="@android:drawable/ic_input_add"/>
</RelativeLayout>

答案 2 :(得分:0)

以下是在视图顶部添加FloatingActionButton的示例代码。

 FrameLayout frameLayout = (FrameLayout)findViewById(android.R.id.content);

    Button button = new Button(this);
    button.setText("Your text here");
    FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(300,300);
    params.width = 300;
    params.height = 300;

    button.setLayoutParams(params);
    frameLayout.addView(button);

根据您的要求配置布局参数。 此示例代码 - 您可以使用floatingactionbutton替换按钮