项目之底部导航栏(二)

1.初始化Fragment

    private void initFragment() {
        String[] mTitles = getResources().getStringArray(R.array.main_titles);
        BaseFragment[] fragments = new BaseFragment[mTitles.length];
        fragments[0] = NewsFragment.getInstance();
        fragments[1] = VideoFragment.getInstance();
        fragments[2] = GirlFragment.getInstance();
        fragments[3] = MineFragment.getInstance();
        
        BaseFragmentAdapter mAdapter = new BaseFragmentAdapter(getSupportFragmentManager(), fragments);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setPageMargin(SettingUtil.dip2px(this, 16)); // 设置页面间距
        mViewPager.addOnPageChangeListener(this);
        mViewPager.setCurrentItem(currentTabPosition); // private int currentTabPosition = 0;
        mNews.setSelected(true);
    }


2.新建NewsFragment

package com.huading.baselhz;

import com.huading.baselhz.base.BaseFragment;

/**
 * 作者:LHZ on 2017/5/3 17:28
 * 界面:
 */
public class NewsFragment extends BaseFragment {
    
    public static NewsFragment getInstance() {
        NewsFragment newsFragment = new NewsFragment();
        return newsFragment;
    }

    @Override
    protected int getLayoutId() {
        return 0;
    }

    @Override
    protected void initView() {

    }


    @Override
    protected void lazyFetchData() {

    }
}


3.新建BaseFragmentAdapter

package com.huading.baselhz.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

import com.huading.baselhz.base.BaseFragment;

/**
 * Created by LHZ on 2017/3/1.
 * 通用的FragmentAdapter
 */

public class BaseFragmentAdapter extends FragmentPagerAdapter {
    private FragmentManager fm;
    BaseFragment[] fragmentList;
    private String[] mTitles;

    public BaseFragmentAdapter(FragmentManager fm, BaseFragment[] fragmentList) {
        super(fm);
        this.fm = fm;
        this.fragmentList = fragmentList;
    }

    public BaseFragmentAdapter(FragmentManager fm, BaseFragment[] fragmentList, String[] mTitles) {
        super(fm);
        this.fm = fm;
        this.fragmentList = fragmentList;
        this.mTitles = mTitles;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles == null ? "" : mTitles[position];
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList[position];
    }

    @Override
    public int getCount() {
        if(fragmentList == null) return 0;
        return fragmentList.length;
    }

    /**
     * 这边并没有创建销毁过程,只创建一次
     * @param container
     * @param position
     * @return
     */
    @Override
    public Fragment instantiateItem(ViewGroup container, int position) {
        Fragment fragment = (Fragment) super.instantiateItem(container, position);
        fm.beginTransaction().show(fragment).commit();
        return fragment;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        Fragment fragment = fragmentList[position];
        fm.beginTransaction().hide(fragment).commit();
    }
}



 

4.对viewPager设置监听,implements ViewPager.OnPageChangeListener

mViewPager.addOnPageChangeListener(this);


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //Empty
    }

    @Override
    public void onPageSelected(int position) {
        resetTab();
        switch (position) {
            case 0:
                mNews.setSelected(true);
                break;
            case 1:
                mVideo.setSelected(true);
                break;
            case 2:
                mGirl.setSelected(true);
                break;
            case 3:
                mMine.setSelected(true);
                break;
            default:
                //其他
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //Empty
    }


初始化tab

    private void resetTab() {
        mNews.setSelected(false);
        mVideo.setSelected(false);
        mGirl.setSelected(false);
        mMine.setSelected(false);
    }

5.设置按钮点击事件

    @OnClick({R.id.news, R.id.video, R.id.girl, R.id.mine})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.news:
                mViewPager.setCurrentItem(0, false);
                break;
            case R.id.video:
                mViewPager.setCurrentItem(1, false);
                break;
            case R.id.girl:
                mViewPager.setCurrentItem(2, false);
                break;
            case R.id.mine:
                mViewPager.setCurrentItem(3, false);
                break;
            default:
                break;
        }
    }

















  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解了您的问题。首先,要实现底部导航栏中间凸起的效果,可以使用uni-ui组件库中的tabBar组件。在tabBar组件中,可以设置中间按钮为凸起样式,并使用自定义图标和文本。 接下来,我将为您介绍如何使用uni-ui中的tabBar组件,并实现中间凸起的效果。 1. 安装uni-ui组件库 在HBuilderX中,打开您的uni-app项目,选择菜单栏的“工具”-“插件市场”,搜索并安装“uni-ui”组件库。 2. 引入tabBar组件 在需要使用tabBar组件的页面中,引入tabBar组件: ```html <template> <view> <tab-bar :tabList="tabList" :current="current" @change="changeTab"></tab-bar> </view> </template> <script> import tabBar from '@/uni-ui/tabBar/tabBar.vue' export default { components: { tabBar }, data() { return { tabList: [ { pagePath: '/pages/home/home', text: '首页', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png' }, { pagePath: '/pages/video/video', text: '视频', iconPath: '/static/tabbar/video.png', selectedIconPath: '/static/tabbar/video-active.png' }, { pagePath: '/pages/mine/mine', text: '我的', iconPath: '/static/tabbar/mine.png', selectedIconPath: '/static/tabbar/mine-active.png' } ], current: 0 } }, methods: { changeTab(e) { this.current = e.index uni.switchTab({ url: this.tabList[e.index].pagePath }) } } } </script> ``` 在上述代码中,tabList数组中定义了三个tab,分别对应三个页面。通过设置iconPath和selectedIconPath属性,可以设置未选中和选中状态下的图标。在changeTab方法中,通过uni.switchTab方法实现tab之间的切换。 3. 实现中间凸起的效果 要实现中间凸起的效果,可以在tabBar组件中添加一个自定义的tab,设置其样式为凸起,并与其他tab一起渲染。在changeTab方法中,可以通过判断当前点击的tab是否为自定义tab,来实现特殊处理。 ```html <template> <view class="tab-bar"> <view class="tab" v-for="(item, index) in tabList" :key="index" @click="changeTab({index})"> <view :class="['icon', current === index ? 'active' : '']"> <image :src="current === index ? item.selectedIconPath : item.iconPath"></image> <text>{{item.text}}</text> </view> <view class="custom-tab" v-if="index === 1" @click.stop="changeTab({index: -1})"> <image src="/static/tabbar/plus.png"></image> </view> </view> </view> </template> <script> export default { props: { tabList: { type: Array, default: [] }, current: { type: Number, default: 0 } }, methods: { changeTab(e) { if (e.index === -1) { // 点击自定义tab的处理逻辑 // ... } else { this.$emit('change', e) } } } } </script> <style scoped> .tab-bar { display: flex; justify-content: space-between; align-items: center; height: 100rpx; background-color: #fff; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .icon { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 24rpx; color: #666; } .active .icon { color: #f00; } .custom-tab { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10rpx; width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #f00; display: flex; align-items: center; justify-content: center; } .custom-tab image { width: 50rpx; height: 50rpx; } </style> ``` 在上述代码中,通过v-if指令判断当前渲染的tab是否为自定义tab(即第个tab),如果是则渲染一个自定义tab,并设置其样式为凸起。在changeTab方法中,通过判断点击的tab的index是否为-1,来判断是否点击了自定义tab。 至此,您已经了解了如何使用uni-ui中的tabBar组件,并实现底部导航栏中间凸起的效果。接下来,您可以继续开发您的小视频应用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值