底部导航栏突出

程序员文章站 2022-05-28 21:49:47

...

今天看了一个ios上网易云音乐设置皮肤后底部导航栏的图片就会多出导航栏，我觉得这个比较好看，所以就做了一个虽然没有图片，不多说先看图你就明白了

底部导航栏突出

上图是这个项目的展示，显示部分为viewpage，底部其实就是布局，一个LinearLayout，里面有五个图片

不多说上马！

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="bottom"
    android:clipChildren="false"
    android:gravity="bottom"
    android:orientation="vertical" >

   <!--<FrameLayout-->
       <!--android:id="@+id/fragment_ll"-->
       <!--android:layout_width="match_parent"-->
       <!--android:layout_height="match_parent">-->

   <!--</FrameLayout>-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="@color/white"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100px"
        android:layout_gravity="bottom"
        android:background="#234221"
        android:gravity="bottom" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>

</LinearLayout>

先写一个布局，特殊的地方就在于

    android:clipChildren="false"

在添加了一个这个android:clipChildren

意思：是否限制子View在其范围内，我们将其值设置为false后那么当子控件的高度高于父控件时也会完全显示,而不会被压缩

以下是Activity类：

package com.bc.jy.capital.myapplicationsssss.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.widget.ImageView;
import android.widget.Toast;

import com.bc.jy.capital.myapplicationsssss.R;
import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment;
import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment1;
import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment2;
import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment3;
import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment4;

import java.util.ArrayList;

import butterknife.ButterKnife;

import static com.bc.jy.capital.myapplicationsssss.R.mipmap.ceshisss;
import static com.bc.jy.capital.myapplicationsssss.R.mipmap.ic_launcher;


/**
 * Created by Administrator on 2017/6/9.
 */

public class FragmentAcitivity extends AppCompatActivity implements View.OnClickListener{
//    @BindView(R.id.fragment_ll)
//    LinearLayout fragmentLl;
    ImageView imageView1;
    ImageView imageView2;
    ImageView imageView3;
    ImageView imageView4;
    ImageView imageView5;
    private int height = 100;//固定Imageview的高，单位px
    //动态设置图片宽高
    LayoutParams para1;
    LayoutParams para2;
    LayoutParams para3;
    LayoutParams para4;
    LayoutParams para5;
    //存放Fragment
    private ArrayList<Fragment> fragmentArrayList;
    private ViewPager mViewPager;

    //管理Fragment
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sssssssssss);
        ButterKnife.bind(this);
        mViewPager = (ViewPager) findViewById(R.id.vPager);
        //将fragment添加到数组
        fragmentArrayList = new ArrayList<Fragment>();
        fragmentArrayList.add(new MainFragment());
        fragmentArrayList.add(new MainFragment1());
        fragmentArrayList.add(new MainFragment2());
        fragmentArrayList.add(new MainFragment3());
        fragmentArrayList.add(new MainFragment4());
        fragmentManager = getSupportFragmentManager();
        //初始化
        imageView1 = (ImageView) findViewById(R.id.imageView1);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
        imageView3 = (ImageView) findViewById(R.id.imageView3);
        imageView4 = (ImageView) findViewById(R.id.imageView4);
        imageView5 = (ImageView) findViewById(R.id.imageView5);
        imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);
        imageView4.setOnClickListener(this);
        imageView5.setOnClickListener(this);
//        switchFragment(new MainFragment());
//        img1();
        InitViewPager();
    }

    /**
     * 初始化页卡内容区
     */
    private void InitViewPager() {

        mViewPager = (ViewPager) findViewById(R.id.vPager);
        mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));

        //让ViewPager缓存2个页面
        mViewPager.setOffscreenPageLimit(2);

        //设置默认打开第一页
        mViewPager.setCurrentItem(0);
        img1();
        //设置viewpager页面滑动监听事件
        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    //图片的点击事件
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.imageView1:
//                点击第一个图片到第一个fragment
                img1();
                Toast.makeText(FragmentAcitivity.this,"imageView1",Toast.LENGTH_SHORT).show();
                mViewPager.setCurrentItem(0);//数组从0开始

                break;
            case R.id.imageView2:
                Toast.makeText(FragmentAcitivity.this,"imageView2",Toast.LENGTH_SHORT).show();
                mViewPager.setCurrentItem(1);
                img2();

                break;

            case R.id.imageView3:
                mViewPager.setCurrentItem(2);
                img3();

                break;
            case R.id.imageView4:
                mViewPager.setCurrentItem(3);
                img4();

                break;
            case R.id.imageView5:
                mViewPager.setCurrentItem(4);
                img5();

                break;
        }
    }
    //图片1的设置方式，如果点击第一个图片，或滑动到第一个页面则使用此方法进行设置，以下
    public void img1(){
        para1 = imageView1.getLayoutParams();//动态设置ImageView的大小
        para2 = imageView2.getLayoutParams();
        para3 = imageView3.getLayoutParams();
        para4 = imageView4.getLayoutParams();
        para5 = imageView5.getLayoutParams();
        para1.height = 300;
        para2.height = height;
        para3.height = height;
        para4.height = height;
        para5.height = height;
        imageView1.setLayoutParams(para1);
        imageView2.setLayoutParams(para2);
        imageView3.setLayoutParams(para3);
        imageView4.setLayoutParams(para4);
        imageView5.setLayoutParams(para5);
        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));//动态设置ImageView的图片
        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
    }
    public void img2(){
        para1 = imageView1.getLayoutParams();
        para2 = imageView2.getLayoutParams();
        para3 = imageView3.getLayoutParams();
        para4 = imageView4.getLayoutParams();
        para5 = imageView5.getLayoutParams();
        para2.height = 300;
//        para2.width = 300;
        para1.height = height;
        para3.height = height;
        para4.height = height;
        para5.height = height;
        imageView1.setLayoutParams(para1);
        imageView2.setLayoutParams(para2);
        imageView3.setLayoutParams(para3);
        imageView4.setLayoutParams(para4);
        imageView5.setLayoutParams(para5);
        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));
        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
    }
    public void img3(){
        para1 = imageView1.getLayoutParams();
        para2 = imageView2.getLayoutParams();
        para3 = imageView3.getLayoutParams();
        para4 = imageView4.getLayoutParams();
        para5 = imageView5.getLayoutParams();
        para3.height = 300;
//        para3.width = 300;
        para1.height = height;
        para2.height = height;
        para4.height = height;
        para5.height = height;
        imageView1.setLayoutParams(para1);
        imageView2.setLayoutParams(para2);
        imageView3.setLayoutParams(para3);
        imageView4.setLayoutParams(para4);
        imageView5.setLayoutParams(para5);
        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));
        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
    }
    public void img4(){
        para1 = imageView1.getLayoutParams();
        para2 = imageView2.getLayoutParams();
        para3 = imageView3.getLayoutParams();
        para4 = imageView4.getLayoutParams();
        para5 = imageView5.getLayoutParams();
        para4.height = 300;
        para1.height = height;
        para2.height = height;
        para3.height = height;
        para5.height = height;
        imageView1.setLayoutParams(para1);
        imageView2.setLayoutParams(para2);
        imageView3.setLayoutParams(para3);
        imageView4.setLayoutParams(para4);
        imageView5.setLayoutParams(para5);
        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));
        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
    }
    public void img5(){
        para1 = imageView1.getLayoutParams();
        para2 = imageView2.getLayoutParams();
        para3 = imageView3.getLayoutParams();
        para4 = imageView4.getLayoutParams();
        para5 = imageView5.getLayoutParams();
        para5.height = 300;
        para2.height = height;
        para3.height = height;
        para4.height = height;
        para1.height = height;
        imageView1.setLayoutParams(para1);
        imageView2.setLayoutParams(para2);
        imageView3.setLayoutParams(para3);
        imageView4.setLayoutParams(para4);
        imageView5.setLayoutParams(para5);
        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));
        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));
    }
    /**
     * 页卡切换监听
     * @author weizhi
     * @version 1.0
     */
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

        @Override
        public void onPageSelected(int position) {
            Animation animation = null ;
            switch (position){

                //当前为页卡1
                case 0:
                    img1();
                    break;

                //当前为页卡2
                case 1:
                    //从页卡1跳转转到页卡2
                    img2();
                    break;

                //当前为页卡3
                case 2:
                    //从页卡1跳转转到页卡2
                    img3();
                    break;
                //当前为页卡3
                case 3:
                    //从页卡1跳转转到页卡2
                    img4();
                    break;
                //当前为页卡3
                case 4:
                    //从页卡1跳转转到页卡2
                    img5();
                    break;
            }
        }

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

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

}

虽然代码比较多，但其实大部分为重复代码，注释我已经加之代码中，如果不懂可以看一看代码内的注释。

其中使用到了viewpage，所以一定不要忘了它的适配器：

package com.bc.jy.capital.myapplicationsssss.activity;

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

import java.util.ArrayList;

/**
 * Fragment适配器
 * @author weizhi
 * @version 1.0
 */
public class MFragmentPagerAdapter extends FragmentPagerAdapter {

    //存放Fragment的数组
    private ArrayList<Fragment> fragmentsList;

    public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
        super(fm);
        this.fragmentsList = fragmentsList;
    }

    @Override
    public Fragment getItem(int position) {

        return fragmentsList.get(position);
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
}

在Activity中还有就是fragment了这里就不用我写了吧，主要你会创建fragment类就可以了：

package com.bc.jy.capital.myapplicationsssss.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bc.jy.capital.myapplicationsssss.R;

/**
 * Created by Administrator on 2017/11/30.
 */

public class MainFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = View.inflate(getActivity(), R.layout.fragment,null);

        return v;
    }
}

算了，我还是写上一个吧，其他的只要复制就好了，布局里想写什么就写什么，反正你高兴。

其实就是这么简单。虽然我搞了一天，哈哈。

如果有什么问题可以私聊我，或者评论，看到我会回复。

相关标签： ImageView突出底部导航栏突出底部导航栏中间突出底部导航栏网易云音乐底部导航栏

上一篇： PHP数据采集程序采集天气网数据实例演示

下一篇：与林星关于ESB(Enterprise Service Bus)产品的一些讨论 SOA企业应用Workflow软件测试项目管理

底部导航栏突出

详解微信小程序设置底部导航栏目方法

微信小程序教程系列之设置标题栏和导航栏（7）

Vue实现导航栏点击当前标签变色功能

android中Fragment+RadioButton实现底部导航栏

JS滚动到指定位置导航栏固定顶部

vue elementUI使用tabs与导航栏联动

vue实现导航标题栏随页面滚动渐隐渐显效果

微信小程序实战之仿android fragment可滑动底部导航栏（4）

小程序实现自定义导航栏适配完美版

小程序自定义单页面、全局导航栏的实现代码