美文网首页
1、现在大部分app的首页都是几个tab切换的效果，俗话说，条条

1、现在大部分app的首页都是几个tab切换的效果，俗话说，条条

作者: xiaobiaogong | 来源:发表于2019-01-07 15:01 被阅读0次

    1、现在大部分app的首页都是几个tab切换的效果，俗话说，条条道路罗马。尽管有多重方式可以实现这种效果，本人尝试过viewpager+fragment,打开app时初始化太多的fragment，导致启动缓慢，部分低配机型甚至卡顿，参考前辈的经验，最终选择frameLayout+fragment 懒加载 替换来实现，下面贴上主要代码

    首页布局

    
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

            android:id="@+id/rl_container"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_marginBottom="@dimen/y100"

            android:orientation="vertical"

            >

                android:id="@+id/ll_main"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:background="@color/white"

                android:orientation="vertical">





























                android:id="@+id/viewPager_container"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:background="@color/white"

                android:visibility="gone">

            android:id="@+id/linea_bottom_tab"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="bottom"

            android:orientation="vertical">

                layout="@layout/bottom_tab_layout"

                android:layout_width="match_parent"

                android:layout_height="wrap_content" />

</LinearLayout>

    底部 bottom_tab_layout

    
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">

        android:layout_width="match_parent"

        android:layout_height="@dimen/x150"

        android:orientation="horizontal"

        >

            android:layout_width="match_parent"

            android:src="@drawable/mainpage_bottom_gray_icon"

            android:layout_height="wrap_content">













            android:layout_marginTop="@dimen/x50"

            android:background="#f7f7f8"

            android:layout_width="match_parent"

            android:layout_height="wrap_content">

                android:id="@+id/linea_tab1"

                android:layout_gravity="bottom"

                android:layout_marginBottom="@dimen/x6"

                android:layout_weight="1"

                android:layout_width="0dp"

                android:layout_height="@dimen/x100">

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content">

                        android:id="@+id/iv_1"

                        android:src="@drawable/mainpage_icon_selected"

                        style="@style/tab_mainpage_image_style" />

                        style="@style/tab_mainpage_textview_style"

                        android:id="@+id/tv1"

                        android:text="首页"

                        />

                android:id="@+id/linea_tab2"

                android:layout_marginBottom="@dimen/x6"

                android:layout_gravity="bottom"

                android:layout_weight="1"

                android:layout_width="0dp"

                android:layout_height="@dimen/x100">

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content">

                        android:id="@+id/iv_2"

                        android:src="@drawable/chargstation"

                        style="@style/tab_mainpage_image_style" />

                        style="@style/tab_mainpage_textview_style"

                        android:id="@+id/tv2"

                        android:text="找桩"

                        />

android:orientation="vertical"

                android:gravity="center_horizontal"

                android:layout_weight="1"

                android:layout_width="0dp"

                android:visibility="invisible"

                android:layout_height="@dimen/x120">

                android:layout_gravity="bottom"

                android:id="@+id/linea_tab4"

                android:layout_marginBottom="@dimen/x6"

                android:layout_weight="1"

                android:layout_width="0dp"

                android:layout_height="@dimen/x100">

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content">

                        android:id="@+id/iv_4"

                        android:src="@drawable/icon_discount"

                        style="@style/tab_mainpage_image_style" />

                        style="@style/tab_mainpage_textview_style"

                        android:id="@+id/tv4"

                        android:text="发现"

                        />

                android:layout_gravity="bottom"

                android:id="@+id/linea_tab5"

                android:layout_marginBottom="@dimen/x6"

                android:layout_weight="1"

                android:layout_width="0dp"

                android:layout_height="@dimen/x100">

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content">

                        android:id="@+id/iv_5"

                        android:src="@drawable/myself"

                        style="@style/tab_mainpage_image_style" />

                        style="@style/tab_mainpage_textview_style"

                        android:id="@+id/tv5"

                        android:text="我的"

                        />

    android:layout_width="match_parent"

    android:layout_height="wrap_content">

        android:layout_centerInParent="true"

        android:id="@+id/linea_tab3"

        android:layout_centerHorizontal="true"

        android:gravity="center_horizontal"

        android:layout_width="wrap_content"

        android:layout_height="@dimen/x150">

            android:layout_width="wrap_content"

            android:layout_height="wrap_content">

                android:elevation="@dimen/x10"

                android:layout_centerInParent="true"

                android:id="@+id/iv_3"

                android:layout_width="@dimen/x135"

                android:layout_height="@dimen/x150"

                android:scaleType="fitXY"

                android:background="@drawable/charge_tab_bg"

                android:layout_marginBottom="@dimen/x20"

                />

</FrameLayout>

    下面是Activity 代码,继承的子类h可以忽略，你可以直接继承Activity

    
public class MainPageActivityextends Activityimplements View.OnClickListener

{

ImageViewiv_tab1, iv_tab2, iv_tab3, iv_tab4, iv_tab5;

    TextViewtv_tab1, tv_tab2, tv_tab4, tv_tab5;

    LinearLayoutlinea_tab1, linea_tab2, linea_tab3, linea_tab4, linea_tab5;

    ImageView[]iv_array = {iv_tab1, iv_tab2, iv_tab3, iv_tab4, iv_tab5};

    TextView[]tv_array = {tv_tab1, tv_tab2, tv_tab4, tv_tab5};

    LinearLayout[]linea_array = {linea_tab1, linea_tab2, linea_tab3, linea_tab4, linea_tab5};

    int[]iv_idarray = {R.id.iv_1, R.id.iv_2, R.id.iv_3, R.id.iv_4, R.id.iv_5};

    int[]tv_idarray = {R.id.tv1, R.id.tv2, R.id.tv4, R.id.tv5};

    int[]linea_idarray = {R.id.linea_tab1, R.id.linea_tab2, R.id.linea_tab3, R.id.linea_tab4, R.id.linea_tab5};

    private SparseArraylist;

    FragmentAdapteradapter;

    LinearLayoutll_main;

    FragmentmCurrentFragment =null;

    Charge_Station_FragmentmCharge_Station_Fragment;

    Home_FragementmHome_fragement;

    MyInfo_FragementmMyInfo_fragement;

    //    News_Fragement mNews_fragement ;

    Discover_Container_FragmentmDiscover_container_fragment;

    private FragmentManagerfragmentManager;

    private FragmentTransactionbeginTransaction;

    String[]tags = {"1", "2", "3", "4"};

    ImageViewiv_charge_btn;

    public static MainPageActivityinstance;

    private ProgressDialogdialog;

    private int key;

    @Override

    protected void onCreate(final Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

        setContentView(R.layout.mainpage_layout);

        initUI();

        ShowLoadingDialog("加载中...");

        mCharge_Station_Fragment = Charge_Station_Fragment.newInstance(null);

        mHome_fragement = Home_Fragement.newInstance(null);

        mMyInfo_fragement = MyInfo_Fragement.newInstance(null);

        mDiscover_container_fragment = Discover_Container_Fragment.newInstance(null);

        mDiscover_container_fragment.onAttach(this);

//        fragmentManager = getSupportFragmentManager();

        mCurrentFragment =mHome_fragement;

        initViewcontainer(0);

    }

private void initViewcontainer (int index){

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

            hideFragments(transaction);

            switch (index) {

case 0:

initFragemtnt(transaction, mHome_fragement);

break;

                case 1:

initFragemtnt(transaction, mCharge_Station_Fragment);

break;

                case 2:

initFragemtnt(transaction, mDiscover_container_fragment);

break;

                case 3:

LogCatUtil.i("time====", "点击个人中心");

                    initFragemtnt(transaction, mMyInfo_fragement);

break;

            }

}

void initFragemtnt (FragmentTransaction fragmentTransaction, Fragment fragment){

fragmentTransaction.replace(R.id.rl_container, fragment, fragment.getTag()).show(fragment);

            fragmentTransaction.commitAllowingStateLoss();

        }

/**

        * 隐藏所有的Fragment

        * @param transaction transaction

*/

        private void hideFragments (FragmentTransaction transaction){

if (mHome_fragement !=null) {

transaction.hide(mHome_fragement);

            }

if (mCharge_Station_Fragment !=null) {

transaction.hide(mCharge_Station_Fragment);

            }

if (mDiscover_container_fragment !=null) {

transaction.hide(mDiscover_container_fragment);

            }

if (mMyInfo_fragement !=null) {

transaction.hide(mMyInfo_fragement);

            }

}

private void initUI () {

iv_charge_btn = (ImageView) findViewById(R.id.iv_3);

            dialog =new ProgressDialog(this);

            dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);

            dialog.setCancelable(true);

            myViewPager = (CustomViewPager) findViewById(R.id.viewPager_container);

//        rlayout_top = (LinearLayout) findViewById(R.id.rlayout_top);

            ll_main = (LinearLayout) findViewById(R.id.ll_main);

            for (int i =0; i

iv_array[i] = (ImageView) findViewById(iv_idarray[i]);

            }

for (int i =0; i

tv_array[i] = (TextView) findViewById(tv_idarray[i]);

            }

for (int i =0; i

linea_array[i] = (LinearLayout) findViewById(linea_idarray[i]);

                linea_array[i].setOnClickListener(this);

            }

}

int current_index = -1;

        private void changeSelectTab (int tab){

//选中的tab  改变字体颜色和图片

            if (current_index == tab)return;

            for (int i =0; i

if (i == tab) {

switch (i) {//选中了第i个tab

                        case 0:

iv_array[0].setImageResource(R.drawable.mainpage_icon_selected);

                            tv_array[0].setTextColor(getResources().getColor(R.color.public_color));

break;

                        case 1:

iv_array[1].setImageResource(R.drawable.chargstation_select);

                            tv_array[1].setTextColor(getResources().getColor(R.color.public_color));

break;

                        case 2:

//                            iv_array[2].setImageResource(R.drawable.chaege_select);

                            break;

                        case 3:

iv_array[3].setImageResource(R.drawable.icon_discount_select);

                            tv_array[2].setTextColor(getResources().getColor(R.color.public_color));

break;

                        case 4:

iv_array[4].setImageResource(R.drawable.myself_select);

                            tv_array[3].setTextColor(getResources().getColor(R.color.public_color));

break;

                    }

}else {

switch (i) {//没有选中了第i个tab

                        case 0:

iv_array[0].setImageResource(R.drawable.mainpage_icon_unselect);

                            tv_array[0].setTextColor(getResources().getColor(R.color.textcolor_gray));

break;

                        case 1:

iv_array[1].setImageResource(R.drawable.chargstation);

                            tv_array[1].setTextColor(getResources().getColor(R.color.textcolor_gray));

break;

                        case 2:

//                            iv_array[2].setImageResource(R.drawable.chaege_select);

                            break;

                        case 3:

iv_array[3].setImageResource(R.drawable.icon_discount);

                            tv_array[2].setTextColor(getResources().getColor(R.color.textcolor_gray));

break;

                        case 4:

iv_array[4].setImageResource(R.drawable.myself);

                            tv_array[3].setTextColor(getResources().getColor(R.color.textcolor_gray));

break;

                    }

}

}

}

/**

* Called when a view has been clicked.

*

        * @param v The view that was clicked.

*/

        @Override

        public void onClick (View v){

if (!NoDoubleClickUtils.isDoubleClick()) {

switch (v.getId()) {

case R.id.linea_tab1:

StatusBarUtil.Companion.darkMode(this);

//                    StatusBarUtil.Companion.setPaddingSmart(getActivity(),toolbar);

//                    fullScreen(this);

                        changeSelectTab(0);

                        current_index =0;

                        initViewcontainer(0);

//                    myViewPager.setCurrentItem(0);

                        User_Behavior_Analysis.UploadUser_Behavior("首页", "", "点击首页按钮", "", 0L);

break;

                    case R.id.linea_tab2:

//                    fullScreen(this);

                        changeSelectTab(1);

                        current_index =1;

//                    myViewPager.setCurrentItem(1);

                        initViewcontainer(1);

                        User_Behavior_Analysis.UploadUser_Behavior("首页", "", "点击找桩找桩", "", 0L);

break;

                    case R.id.linea_tab3:

//

                        scanQRCode();

                        current_index =2;

                        User_Behavior_Analysis.UploadUser_Behavior("首页", "", "点击扫码按钮", "", 0L);

break;

                    case R.id.linea_tab4:

//                    fullScreen(this);

                        setTitleVisible(false);

                        changeSelectTab(3);

                        current_index =3;

//                    myViewPager.setCurrentItem(2);

                        initViewcontainer(2);

                        User_Behavior_Analysis.UploadUser_Behavior("首页", "发现", "发现", "", 0L);

//

                        break;

                    case R.id.linea_tab5:

//                    setStatusBar();

                        changeSelectTab(4);

                        current_index =4;

//                    myViewPager.setCurrentItem(3);

                        initViewcontainer(3);

//

                        User_Behavior_Analysis.UploadUser_Behavior("首页", "我的", "我的", "", 0L);

break;

                }

}

}

}

    最后在附上一个懒加载的fragment 其他类似,布局什么的自己弄个简单的就可以，想法才是关键

    package com.gdmcmc.wckc.fragment;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.view.ViewPager;

import android.support.v4.widget.SwipeRefreshLayout;

import android.text.TextPaint;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

import android.widget.TextView;

import com.gdmcmc.wckc.R;

import com.gdmcmc.wckc.WebviewActivity;

import com.gdmcmc.wckc.charger.Activity_ChargingOrder_Coupon;

import com.gdmcmc.wckc.httputils.APPConfig;

import com.gdmcmc.wckc.order.Activity_Monthly_Payment;

import com.gdmcmc.wckc.order.Activity_OrderRecord_v3;

import com.gdmcmc.wckc.po.User;

import com.gdmcmc.wckc.po.UserData;

import com.gdmcmc.wckc.tools.util.Activity_Control;

import com.gdmcmc.wckc.tools.util.AndroidShare;

import com.gdmcmc.wckc.tools.util.LogCatUtil;

import com.gdmcmc.wckc.tools.util.MainApplication;

import com.gdmcmc.wckc.tools.util.NoDoubleClickUtils;

import com.gdmcmc.wckc.tools.util.StatusBarUtil;

import com.gdmcmc.wckc.tools.util.User_Behavior_Analysis;

import com.gdmcmc.wckc.user.Activity_Login;

import com.gdmcmc.wckc.user.Activity_Message;

import com.gdmcmc.wckc.user.Activity_MyWallet;

import com.gdmcmc.wckc.user.Activity_Setting;

import com.gdmcmc.wckc.user.Activity_UserFav;

import com.gdmcmc.wckc.user.Activity_UserInfoEdit;

import java.util.List;

/**

* Created by gong on 2017/9/13.

*/

public class MyInfo_Fragementextends BaseFragmentimplements View.OnClickListener, SwipeRefreshLayout.OnRefreshListener {

private SwipeRefreshLayoutmSwipeRefreshLayout;

    Viewview;

    private Activityactivity;

    LongpageShowTime =0L;

    private RelativeLayoutllayout_top =null;

    private boolean isFirstShow =true;

    public static MyInfo_FragementnewInstance(Bundle bundle) {

MyInfo_Fragement myInfo_fragement =new MyInfo_Fragement();

        if (bundle !=null) myInfo_fragement.setArguments(bundle);

        return myInfo_fragement;

    }

@Override

    public ViewonCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

if (view ==null) {

view = inflater.inflate(R.layout.activity_personal_center_v3, null);

            initview(view);

//          initDate();

        }

}

@Override

    public void onAttach(Activity activity) {

super.onAttach(activity);

        this.activity = activity;

    }

@Override

    public void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

        super.onCreate(savedInstanceState);

//        setContentView(R.layout.activity_personal_center);

//        initview();

    }

private void initDate() {

}

private void showHeadPic() {

}

private void initview(View v) {

}

private void setListener() {

// TODO Auto-generated method stub

        edt_name.setOnClickListener(this);

        iv_user_icon.setOnClickListener(this);

        lina_collection.setOnClickListener(this);

        lina_wollet.setOnClickListener(this);

        lina_order.setOnClickListener(this);

        lina_coupon.setOnClickListener(this);

        lina_message.setOnClickListener(this);

        lina_guide.setOnClickListener(this);

        lina_setting.setOnClickListener(this);

        lina_monthly.setOnClickListener(this);

        lina_monthly_bill.setOnClickListener(this);

        lina_order_monthly.setOnClickListener(this);

    }

@Override

    public void onClick(View v) {

}

@Override

    public void setUserVisibleHint(boolean isVisibleToUser) {

super.setUserVisibleHint(isVisibleToUser);

        if (isVisibleToUser) {

//            initDate();

            pageShowTime = System.currentTimeMillis();

        }else {

disMissRefresh();

            User_Behavior_Analysis.UploadUser_Behavior("首页", "首页", "个人中心", "", pageShowTime);

        }

}

@Override

    public void onPause() {

super.onPause();

//        mShakeUtils.onPause();

    }

@Override

    public void onResume() {

// TODO Auto-generated method stub

        super.onResume();

        if (isFirstShow) {

initDate();

        }else {

}

}

@SuppressLint("NewApi")

private void getUserData() {

}

private void disMissRefresh() {

if (mSwipeRefreshLayout !=null &&mSwipeRefreshLayout.isRefreshing()) {

mSwipeRefreshLayout.setRefreshing(false);

        }

}

@Override

    public void onRefresh() {

mSwipeRefreshLayout.setRefreshing(true);

        initDate();

    }

private void LogingActivity() {

startActivity(new Intent(getActivity(), Activity_Login.class));

    }

}

    相关文章

      网友评论

          本文标题：1、现在大部分app的首页都是几个tab切换的效果，俗话说，条条

          本文链接：https://www.haomeiwen.com/subject/ituurqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|1、现在大部分app的首页都是几个tab切换的效果，俗话说，条条|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！