多种多样的App主界面TAB实现方法

最新推荐文章于 2022-05-27 14:21:54 发布
最新推荐文章于 2022-05-27 14:21:54 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： Android 文章标签： viewpager Tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/an13531829360/article/details/52834229
版权

多种多样的App主界面TAB实现方法

  • (1)ViewPager实现点击Tab切换和手势滑动切换
  • (2)Fragment实现点击Tab切换界面
  • (3)ViewPager和FragmentPagerAdapter实现点击Tab切换和手势滑动切换
  • (4)ViewPagerIndicator与ViewPager实现Tab

(1)ViewPager实现点击Tab切换和手势滑动切换

先定义一个button布局作为主界面的Tab button.xml，四个Tab的小图标

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_bottom_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@android:color/darker_gray"
    android:layout_marginBottom="10dp"
    >
    <!-- 底部四个导航按钮 -->
    <LinearLayout
        android:id="@+id/ll_tabs"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:id="@+id/lin_one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_gravity="center_horizontal"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="30dp"
                android:src="@mipmap/main_switch"
                android:layout_gravity="center_horizontal"
                android:layout_height="30dp" />
            <TextView
                android:id="@+id/tv_main"
                android:layout_width="match_parent"
                android:text="首页"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_two"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="30dp"
                android:src="@mipmap/my_switch"
                android:layout_gravity="center_horizontal"
                android:layout_height="30dp" />
            <TextView
                android:id="@+id/tv_contact"
                android:layout_width="match_parent"
                android:text="联系人"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_three"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="30dp"
                android:src="@mipmap/my_switch"
                android:layout_gravity="center_horizontal"
                android:layout_height="30dp" />
            <TextView
                android:id="@+id/tv_my"
                android:layout_width="match_parent"
                android:text="我的"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_four"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="30dp"
                android:src="@mipmap/main_switch"
                android:layout_gravity="center_horizontal"
                android:layout_height="30dp" />
            <TextView
                android:id="@+id/tv_set"
                android:layout_width="match_parent"
                android:text="设置"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <!-- 导航和视图的分割线 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#0eefff"
        android:layout_above="@id/ll_tabs"
        />

</LinearLayout>
现在来书写主活动的XMLactivity_main
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- VIewPager 主要是加载内容的 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"/>

    <include layout="@layout/button"/>

</LinearLayout>
定义几个TAB分别对应的界面（4个layout文件）相似的
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是聊天页卡"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        android:gravity="center"/>
</LinearLayout>
现在来看看MainActivity中代码的书写
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    /**
     * 四个导航
     */
    LinearLayout lintonOne;
    LinearLayout lintonTwo;
    LinearLayout lintonThree;
    LinearLayout lintonFour;
    PagerAdapter adapter;
    private TextView tvmain;
    private TextView tvcontact;
    private TextView tvmy;
    private TextView tvset;
    /**
     * 作为页面容器的ViewPager
     */
    ViewPager mViewPager;
    private List<View> mViews=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initialize();
    }
    private void initialize() {
        lintonOne= (LinearLayout) findViewById(R.id.lin_one);
        lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
        lintonThree=(LinearLayout) findViewById(R.id.lin_three);
        lintonFour=(LinearLayout) findViewById(R.id.lin_four);
        tvmain = (TextView) findViewById(R.id.tv_main);
        tvcontact = (TextView) findViewById(R.id.tv_contact);
        tvmy = (TextView) findViewById(R.id.tv_my);
        tvset = (TextView) findViewById(R.id.tv_set);
        tvmain.setTextColor(Color.RED);
        lintonOne.setOnClickListener(this);
        lintonTwo.setOnClickListener(this);
        lintonThree.setOnClickListener(this);
        lintonFour.setOnClickListener(this);
        mViewPager=(ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater=LayoutInflater.from(this);
        View view1 = inflater.inflate(R.layout.fragment_chat, null);
        View view2 = inflater.inflate(R.layout.fragment_contact, null);
        View view3 = inflater.inflate(R.layout.fragment_my, null);
        View view4 = inflater.inflate(R.layout.fragment_set, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        mViews.add(view4);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                resetImg();
                switch (position){
                    case 0:
                        mViewPager.setCurrentItem(0);
                        tvmain.setTextColor(Color.RED);
                        break;
                    case 1:
                        mViewPager.setCurrentItem(1);
                        tvcontact.setTextColor(Color.RED);
                        break;
                    case 2:
                        mViewPager.setCurrentItem(2);
                        tvmy.setTextColor(Color.RED);
                        break;
                    case 3:
                        mViewPager.setCurrentItem(3);
                        tvset.setTextColor(Color.RED);
                        break;
                }
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
        adapter=new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mViews.get(position);

                container.addView(view);
                return view;
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mViews.get(position));
            }
            @Override
            public int getCount() {
                return mViews.size();
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }
        };
        mViewPager.setAdapter(adapter);
    }
    @Override
    public void onClick(View v) {
        resetImg();
        switch(v.getId()){
            case R.id.lin_one:
                tvmain.setTextColor(Color.RED);
                mViewPager.setCurrentItem(0);
                break;
            case R.id.lin_two:
                mViewPager.setCurrentItem(1);
                tvcontact.setTextColor(Color.RED);
                break;
            case R.id.lin_three:
                mViewPager.setCurrentItem(2);
                tvmy.setTextColor(Color.RED);
                break;
            case R.id.lin_four:
                mViewPager.setCurrentItem(3);
                tvset.setTextColor(Color.RED);
                break;
        }
    }
    //重置TAB的字体颜色（也可以变化图片）
    private void resetImg() {
        tvmain.setTextColor(Color.BLACK);
        tvcontact.setTextColor(Color.BLACK);
        tvmy.setTextColor(Color.BLACK);
        tvset.setTextColor(Color.BLACK);
    }
}

(2)Fragment实现点击Tab切换界面（不可手势滑动）

layout文件和上面的一样

创建四个Fragment ：ChatFragment、ContactsFragment、MyFragment、SetFragment
/**
 *聊天界面
 */
public class ChatFragment extends Fragment {

    private static final String TAG = "ChatFragment";
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        Log.i(TAG, "------:Chat ");

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

    }
}

其他的Fragment都一样，只是加载不一样的Layout

MainActivity代码的书写
    package com.cca.an.myfragment02;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentTransaction;
    import android.support.v4.view.PagerAdapter;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.FrameLayout;
    import android.widget.LinearLayout;
    import android.widget.TextView;

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

        private FrameLayout frameLayout;

        /**
         * 四个导航
         */
        LinearLayout lintonOne;
        LinearLayout lintonTwo;
        LinearLayout lintonThree;
        LinearLayout lintonFour;
        private TextView tvmain;
        private TextView tvcontact;
        private TextView tvmy;
        private TextView tvset;

        /**
         * 四个切换的界面
         */
        private ChatFragment mChatFragment;
        private ContactFragment mContactFragment;
        private MyFragment mMyFragment;
        private SetFragment mSetFragment;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initialize();
        }

        /**
         * 初始化控件
         */
        private void initialize() {
                lintonOne= (LinearLayout) findViewById(R.id.lin_one);
                lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
                lintonThree=(LinearLayout) findViewById(R.id.lin_three);
                lintonFour=(LinearLayout) findViewById(R.id.lin_four);
                tvmain = (TextView) findViewById(R.id.tv_main);
                tvcontact = (TextView) findViewById(R.id.tv_contact);
                tvmy = (TextView) findViewById(R.id.tv_my);
                tvset = (TextView) findViewById(R.id.tv_set);
                tvmain.setTextColor(Color.RED);
                lintonOne.setOnClickListener(this);
                lintonTwo.setOnClickListener(this);
                lintonThree.setOnClickListener(this);
                lintonFour.setOnClickListener(this);
                frameLayout = (FrameLayout) findViewById(R.id.frameLayout);

            //默认第一个
            setSelect(0);

        }

        /**
         * 点击事件的处理
         * @param v
         */
        @Override
        public void onClick(View v) {
            resetImg();
            switch(v.getId()){
                case R.id.lin_one:
                    setSelect(0);
                    break;
                case R.id.lin_two:
                    setSelect(1);
                    break;
                case R.id.lin_three:
                    setSelect(2);
                    break;
                case R.id.lin_four:
                    setSelect(3);
                    break;
            }
        }

        /**
         * 选择字体的颜色和显示选中的Fragment
         * @param i
         */
        private void setSelect(int i) {
            FragmentManager fm=getSupportFragmentManager();
            FragmentTransaction transaction = fm.beginTransaction();
            hideFragment(transaction);
            switch (i){
                case 0:
                    if (mChatFragment==null){
                        mChatFragment=new ChatFragment();
                        transaction.add(R.id.frameLayout,mChatFragment);
                    }else {
                        transaction.show(mChatFragment);
                    }
                    tvmain.setTextColor(Color.RED);
                    break;
                case 1:
                    if (mContactFragment==null){
                        mContactFragment=new ContactFragment();
                        transaction.add(R.id.frameLayout,mContactFragment);
                    }else {
                        transaction.show(mContactFragment);
                    }
                    tvcontact.setTextColor(Color.RED);
                    break;
                case 2:
                    if (mMyFragment==null){
                        mMyFragment=new MyFragment();
                        transaction.add(R.id.frameLayout,mMyFragment);
                    }else {
                        transaction.show(mMyFragment);
                    }
                    tvmy.setTextColor(Color.RED);
                    break;
                case 3:
                    if (mSetFragment==null){
                        mSetFragment=new SetFragment();
                        transaction.add(R.id.frameLayout,mSetFragment);
                    }else {
                        transaction.show(mSetFragment);
                    }
                    tvset.setTextColor(Color.RED);
                    break;

            }
            transaction.commit();
        }

        /**
         * 隐藏所有的Fragment
         * @param transaction
         */
        private void hideFragment(FragmentTransaction transaction) {
            if (mChatFragment!=null){
                transaction.hide(mChatFragment);
            }
            if (mContactFragment!=null){
                transaction.hide(mContactFragment);
            }
            if (mMyFragment!=null){
                transaction.hide(mMyFragment);
            }
            if (mSetFragment!=null){
                transaction.hide(mSetFragment);
            }

        }

        //重置TAB的字体颜色（也可以变化图片）
        private void resetImg() {
            tvmain.setTextColor(Color.BLACK);
            tvcontact.setTextColor(Color.BLACK);
            tvmy.setTextColor(Color.BLACK);
            tvset.setTextColor(Color.BLACK);
        }
    }

(3)ViewPager和FragmentPagerAdapter实现点击Tab切换和手势滑动切换

四个layout和Fragment资源和上面一样

MainActivity界面的main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- VIewPager 主要是加载内容的 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"/>

    <include layout="@layout/button"/>

</LinearLayout>

MainActivity代码的书写

package com.cca.an.myviewpagerfragment03;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    /**
     * 四个导航
     */
    LinearLayout lintonOne;
    LinearLayout lintonTwo;
    LinearLayout lintonThree;
    LinearLayout lintonFour;
    private TextView tvmain;
    private TextView tvcontact;
    private TextView tvmy;
    private TextView tvset;

    /**
     * 四个切换的界面
     */
    private ChatFragment mChatFragment;
    private ContactFragment mContactFragment;
    private MyFragment mMyFragment;
    private SetFragment mSetFragment;

    private ViewPager mViewPager;
    FragmentPagerAdapter adapter;
    private List<Fragment> mFragments=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initialize();
    }

    /**
     * 初始化控件
     */
    private void initialize() {
        lintonOne = (LinearLayout) findViewById(R.id.lin_one);
        lintonTwo = (LinearLayout) findViewById(R.id.lin_two);
        lintonThree = (LinearLayout) findViewById(R.id.lin_three);
        lintonFour = (LinearLayout) findViewById(R.id.lin_four);
        tvmain = (TextView) findViewById(R.id.tv_main);
        tvcontact = (TextView) findViewById(R.id.tv_contact);
        tvmy = (TextView) findViewById(R.id.tv_my);
        tvset = (TextView) findViewById(R.id.tv_set);
        tvmain.setTextColor(Color.RED);
        lintonOne.setOnClickListener(this);
        lintonTwo.setOnClickListener(this);
        lintonThree.setOnClickListener(this);
        lintonFour.setOnClickListener(this);
       mViewPager= (ViewPager) findViewById(R.id.viewPager);

        mChatFragment=new ChatFragment();
        mContactFragment=new ContactFragment();
        mMyFragment=new MyFragment();
        mSetFragment=new SetFragment();

        mFragments.add(mChatFragment);
        mFragments.add(mContactFragment);
        mFragments.add(mMyFragment);
        mFragments.add(mSetFragment);

        adapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };

        mViewPager.setAdapter(adapter);

        //ViewPager界面滑动的监听器
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                resetImg();
                setSelect(position);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    /**
     * 点击事件的处理
     * @param v
     */
    @Override
    public void onClick(View v) {
        resetImg();
        switch(v.getId()){
            case R.id.lin_one:
                setSelect(0);
                break;
            case R.id.lin_two:
                setSelect(1);
                break;
            case R.id.lin_three:
                setSelect(2);
                break;
            case R.id.lin_four:
                setSelect(3);
                break;
        }
    }

    private void setSelect(int i) {
        switch (i){
            case 0:
                tvmain.setTextColor(Color.RED);
                break;
            case 1:
                tvcontact.setTextColor(Color.RED);
                break;
            case 2:
                tvmy.setTextColor(Color.RED);
                break;
            case 3:
                tvset.setTextColor(Color.RED);
                break;

        }
        mViewPager.setCurrentItem(i);
    }
    //重置TAB的字体颜色（也可以变化图片）
    private void resetImg() {
        tvmain.setTextColor(Color.BLACK);
        tvcontact.setTextColor(Color.BLACK);
        tvmy.setTextColor(Color.BLACK);
        tvset.setTextColor(Color.BLACK);
    }
}

(4)ViewPagerIndicator与ViewPager实现Tab

1、首先在AndroidStudio中导入导入PagerIndicator的依赖包

File–>Project Structure–>Dependencies–>点击+号–>Choose Library Dependency–>在搜索框中输入com.inkapplications.viewpageindicator，选中，点击OK，gradle会自动帮我把改工程加载进来的。

 compile 'com.inkapplications.viewpageindicator:library:2.4.3'
2、activity_main的XML文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:background="@android:color/holo_blue_bright"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="慕课网"
            android:layout_marginLeft="10dp"
            android:layout_gravity="center_vertical"
            android:textSize="20sp"/>
    </LinearLayout>

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark" >
    </com.viewpagerindicator.TabPageIndicator>
    <android.support.v4.view.ViewPager
        android:id="@+id/framelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</LinearLayout>
3、完成MainActivity的书写
    package com.cca.an.mypagerind;

    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.LinearLayout;
    import android.widget.Toast;

    import com.viewpagerindicator.TabPageIndicator;
    import com.viewpagerindicator.TitlePageIndicator;

    public class MainActivity extends FragmentActivity {
        private static final String[] CONTENT = new String[] { "头条", "娱乐", "体育", "财经", "科技", "汽车","NBA","科技", "汽车","NBA" };

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            findView();
        }
        private void findView() {
            FragmentPagerAdapter adapter = new NewsAdapter(getSupportFragmentManager());

            ViewPager pager = (ViewPager)findViewById(R.id.framelayout);
            pager.setAdapter(adapter);

            TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
            indicator.setViewPager(pager);
        }

        class NewsAdapter extends FragmentPagerAdapter {
            public NewsAdapter(FragmentManager fm) {
                super(fm);
            }

            @Override
            public Fragment getItem(int position) {
                //新建一个Fragment来展示ViewPager item的内容，并传递参数
                Fragment fragment = new ItemFragment();
                Bundle args = new Bundle();
                args.putString("arg", CONTENT[position]);
                fragment.setArguments(args);
                return fragment;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return CONTENT[position % CONTENT.length].toUpperCase();
            }
            @Override
            public int getCount() {
                return CONTENT.length;
            }
        }

    }
4、ViewPager与PagerIndicator绑定的Fragment界面
package com.cca.an.mypagerind;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by an on 2016/10/16.
 */


public final class ItemFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";
    private String mContent = "";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getString(KEY_CONTENT);
        }
    }

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


            //动态找到布局文件，再从这个布局中find出TextView对象
            View contextView = inflater.inflate(R.layout.fragment_layout, container, false);
            TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

            //获取Activity传递过来的参数
            Bundle mBundle = getArguments();
            String title = mBundle.getString("arg");
            mTextView.setText(title);
            mTextView.setTextColor(Color.RED);
            mTextView.setGravity(Gravity.CENTER);

            return contextView;



    /*    TextView text = new TextView(getActivity());
        text.setGravity(Gravity.CENTER);
        text.setText(mContent);
        text.setTextSize(20 * getResources().getDisplayMetrics().density);
        text.setPadding(20, 20, 20, 20);
        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.addView(text);
        return layout;*/

        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
        }


    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putString(KEY_CONTENT, mContent);
    }
}
5、最后一步在清单文件中配置主题Threme
android:theme="@style/Theme.PageIndicatorDefaults">

总结：至此，四中主界面Tab的实现方法都已经完成。

破荒
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
APP底部TAB图标设计原稿
03-15
APP底部TAB图标设计原稿，PNG图标，高清晰！
多种多样的App主界面Tab实现方法——单独利用Fragment实现Tab
Just follow myself heart.
03-10 1005
视频地址：http://www.imooc.com/video/5903 在单独利用Fragment实现Tab
APP设计中的选项卡式（tab）导航
05-15 7402
在我们的产品中，导航起到了举足轻重的作用。导航相信大家都不陌生，它可以让我们知道“我现在在哪里”“我可以去哪里”“我怎么去目的地”。在手机端里面，导航尤为重要。因为手机的尺寸问题，在设计手机网站或APP的时候，比起web端的需要考虑的更周全，尽量保持简约和易用性高。 选项卡式（tab）导航可以说是最常见的导航了，尤其是APP。大部分的APP都采用这种导航模式作为主导航，有时也会将tab导航和其他的...
App主界面Tab的四种实现方法（下）
Sunny的博客
03-21 1888
上一篇我们介绍了 ViewPager 实现 Tab 和 Fragment 实现 Tab，本篇会继续介绍剩下的两种。FragmentPagerAdapter+ViewPager 实现 Tab 和 ViewPagerIndicator+ViewPager 实现 Tab。 3.FragmentPagerAdapter+ViewPager 实现 Tab大概做法就是将 Fragments 作为 ViewPag
App主界面Tab的四种实现方法（上）
Sunny的博客
03-21 3857
慕课网有门讲解 Android App 中带有多个 tab 页面切换（比如微信的四个tab）的四种实现方式的课，早就看完了，觉得不错，在这里记录一下，代码不会贴全，但我会把关键代码都贴上，附上关键步骤的实现介绍。希望能帮到需要的人。有任何不明白的点，可以在下面留言，我看到后会在第一时间回复你。 四种方式我都会先贴上布局代码，然后贴上实现布局需要的适配器或者 Fragment 代码，最后贴主 A
APP-Tabs:多种多样的App主界面Tab实现方法
06-13
多种多样的App主界面Tab实现方法 TAB第一种实现方式：ViewPager+RadioGroup TAB第二种实现方式：Fragment+RadioGroup TAB第三种实现方式：FragmentPagerAdapter+ViewPager TAB第四种实现方式：ViewPagerIndicator+...
多种多样的App主界面Tab实现方法
03-03
本文将深入探讨四种常见的App主界面Tab实现方法，帮助开发者和设计师更好地理解并选择适合的Tab设计方案。 ### 1. 固定Tab 固定Tab是最常见的一种实现方式，它始终保持在屏幕底部，通常包含3到5个Tab，每个Tab对应...
4种App主界面Tab实现方法的源代码
09-09
本资源包含了四种实现App主界面Tab的源代码，旨在帮助开发者理解并掌握不同的实现方式，提升用户体验。下面我们将详细探讨这四种方法。 1. **Android原生TabLayout** Android SDK提供了一个名为`TabLayout`的组件...
MATLAB APP design-APP登录界面的设计
02-19
在账号和密码提示框中输入相关信息，当输入的账号和密码正确时，点击登录按钮后，登录界面会跳转到工作界面，如果输入的账号和密码错误，则会提示账号和密码错误的信息...跳转界面可以通过修改程序中的Run函数来实现。
Android 实现界面刷新的几种方法
01-05
 Android提供了Invalidate方法实现界面刷新，但是Invalidate不能直接在线程中调用，因为他是违背了单线程模型：Android UI操作并不是线程安全的，并且这些操作必须在UI线程中调用。 Android程序中可以使用的界面...
uniapp 顶部tab切换菜单
03-16
最近在使用uniAPP做项目，页面中要使用到顶部tab菜单，但又不想使用别人的插件，于是自己用代码实现了一下
App主界面Tab四个实现方法
黄小凡的Blogge
06-04 1028
App主界面Tab实现方法： 1.ViewPage 实现Tab主界面; 慕课网链接：http://www.imooc.com/video/5901 步骤: 1.布局文件的创建与优化: 分层创建布局文件,先创建top布局，再创建ViewPage页面,底部再加
APP主界面Tab的4种实现
冬眠FF的博客
03-04 3764
涉及知识点：1.在LinearLayout中,如果一个控件在中间，要想让该控件占据剩余的空间，使用match_parent会导致它底部的控件被挤出去，所以要使用layout_weight=1 height=0dp. 2.eclipse 快捷键 自动修正 Ctrl+1 （可以用于强转，导入） 3.为LinearLayout设置点击事件，如果该布局含有ImageButton,点击事件会被ImageB
tab切换的实现
qq_41386300的博客
05-30 1398
tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容，效果如下 当鼠标放在电影上显示的是电影内容，放在电视上显示的是电视内容，放在综艺上显示的是综艺内容， 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ta...
多种多样的App主界面Tab实现方法（二）：Fragment
chunxiao123ouc的博客
03-15 515
hyman老师慕课网视频连接  http://www.imooc.com/learn/264 上一篇博文说了利用ViewPager实现Tab的方法，每个tab页面的内容只有一个TextView，但是如果页面中的逻辑和控件更加复杂，那么可以想象MainActivity会多么的臃肿。下面介绍另一个方法，利用碎片（Fragment）实现主页面Tab布局。 我自己写的和视频中hyman老师讲的
巧用tab组件实现APP的布局效果
c_trek的博客
08-15 902
FineReport巧用tab组件实现APP的布局效果 1. 版本说明  IOS/Android支持版本   jar包版本   8.4及往后版本   2017年4月1日 2. 描述 tab布局能避免多层次钻取与返回，可以在一个报表内部进行切换，钻取层数如果过多的话，看报表的人的操作体验就会下降很多
tab页过多，展现按钮可左右移动tab页
lixiaonaaa的博客
04-22 1761
1，结果如下图，tab太多，一行放不下，右侧展现左右按钮，鼠标移上tab页可左右移动 2，代码 /** * 功能按钮过多时，可左右移动 * @param {*} id 按钮区域id * @param {*} dom 按钮元素 * @param {*} btnclass 按钮样式 * @param {*} mp 每个按钮需要增加的宽度 * @param {*} n 隐藏按钮增加的个数 */ function btnShowOrHide(id, dom, btnclass='', m.
uni-app 简单顶部tab切换菜单3—可滑动切换菜单
qq_59795720的博客
05-27 6264
顶部tab是可滑动，用scroll-view实现，内容部分比较潦草，可以自行更改，话不多说上代码，最后有完整的代码（复制即可用） HTML <template> <view> <!-- tab部分 --> <swiper class="ct_tab"> <swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in t...
首页tab切换
让世界更美好！
08-14 1662
前面几个文章说的是后台页面. 这一节我们说的是首页. 即index.html 我们的项目就是仿照网易云音乐(移动端). 打开控制台, 选择如下图: 基本结构 页面的基本结构: &lt;section id="tabs" class="globalTabs"&gt; &lt;ol class="tabs-nav"&gt; &lt;li class="active&qu
FragmentTabHost和FragmentActivity实现应用主界面,实现应用界面的tab切换
最新发布
05-24
FragmentTabHost 和 FragmentActivity 可以一起使用来实现应用主界面的 tab 切换。 首先，在布局文件中使用 FragmentTabHost，指定其布局和相应的标签： ```xml <android.support.v4.app.FragmentTabHost android...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值