底部导航栏突出

最新推荐文章于 2022-07-21 15:09:32 发布
最新推荐文章于 2022-07-21 15:09:32 发布
阅读量418 收藏
点赞数 1
分类专栏： Android 文章标签： ImageView突出 底部导航栏突出 底部导航栏中间突出 底部导航栏 网易云音乐底部导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38744614/article/details/78677452
版权

今天看了一个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;
    }
}

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

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

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

悅悅~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓：BottomNavigationBar——底部导航栏控件
A125679880的博客
08-04 5827
BottomNavigationBar是一个用于Android应用程序的底部导航栏控件，通常用于在应用程序的不同页面之间进行快速切换。它提供了一种直观且易于使用的导航方式，使用户可以轻松访问应用程序的各个模块。BottomNavigationBar（底部导航栏）是一种常见的用户界面设计模式，常用于移动应用程序中。
微信 设置底部导航栏
热门推荐
weixin_43077063的博客
08-27 1万+
转 微信小程序设置底部导航栏目方法 2...
安卓底部导航栏几种实现方式，小白菜看了都说简单。
小马哥的博客
07-21 1万+
安卓底部导航栏的实现方式探索： 1.安卓提供默认的导航方式 2.使用简单布局的方式实现 3.Viewpager+RadioGroup+Layout 4.ViewPager+Fragment+RadioGroup(推荐) 纯原生java代码，未集成其他第三方复杂的库，代码经过测试可行。 开发环境： AndroidStudio 4.0 Java语言 SDK8.0以上...
实现底部导航栏中间凸起，（点击中间凸出按钮弹出菜单）
Keep Do It
04-07 1万+
看图，代码不是很复杂。 Github：https://github.com/1023459494/EasyApp
android底部凸起导航菜单
08-05
Android底部导航凸起菜单，利用的是FrameLayout实现的，效果和RadioGroup一样，同样有选中高亮的效果
Android实现淘宝底部图标导航栏
08-26
在本篇文章中，我们详细介绍了如何实现淘宝底部图标导航栏，包括绘制主界面、设计底部导航栏、实现Fragment页面、实现导航栏的点击事件等步骤。希望这些知识点能够帮助您更好地理解和实现淘宝底部图标导航栏。
Android 底部导航栏凸出点击
12-20
在Android应用开发中，底部导航栏（Bottom Navigation Bar）是一种常见的用户界面元素，用于在多个主要功能之间切换。本文将详细解析如何实现“底部导航栏凸出点击”效果，参考了博客《Android 底部导航栏凸出点击》...
android底部导航栏凸出
09-30
"android底部导航栏凸出"是指在用户选择某个选项时，该选项在导航栏上突出显示，以增强用户的交互体验。下面将详细介绍这个特性及其实现方式。 一、自定义底部导航栏 为了实现自定义的底部导航栏，开发者通常会...
底部导航栏（谷歌官方）.zip
09-14
底部导航栏是移动应用设计中的一个关键元素，它在用户界面中扮演着引导用户在不同主要功能间切换的角色。谷歌官方对于底部导航栏的设计有一套详细的指南和规范，旨在提供一致且易于理解的用户体验。本资源"底部导航...
Fragment+Viewpager+中间突出的底部导航栏
05-16
Fragment+Viewpager+中间突出的底部导航栏 实现点击底部导航Tab切换一级fragment 一级fragment中嵌套viewpager滑动切换二级fragment并同时实现与上部title相应点击事件及底部横线切换的关联
ios-底部带突出按钮的tabbar.zip
07-11
只是在tabbar中间加了一个按钮，有需求的朋友可以参考一下。
Android实现仿微信底部导航栏
09-16
使用ViewPager+RadioGroup实现仿微信底部导航栏,注释很全,了解更多请参考：http://www.cnblogs.com/Fill/p/7530655.html
实现底部导航栏中间凸起
11-02 7616
【Android】神奇的android:clipChildren属性 转载于：博客园：http://www.cnblogs.com/      农民伯伯： http://www.cnblogs.com/over140/ 正文 一、效果图 二、实现代码 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:andr
底部导航栏中间凸出效果
bergkamp27的专栏
09-17 2057
xml根部局 加 android:clipChildren="false"， 以我这个导航栏为例， 设置radiogroup高度为50，里面中间的买家秀radiobutton高度为80，重要的一点是要设置radiobutton的android:layout_gravity="bottom"， 不然没效果，style="@style/MainRadioButton"没什么关系； 总结一句话：根布局...
Android 底部导航栏按钮突出
mouse_xiaoli的专栏
12-27 3660
主要是使用了clipChildren属性，设置子控件是否可以超出父控件范围显示，默认true（不可以）、false（可以），此属性一般用在爷爷级控件上效果比较明显，例如上面效果 layout_gravity控制超出的内容在哪块显示 Google对clipChildren属性的原文描述：
android底部导航栏中间凸起效果的制作
罗春娥的技术园
07-04 1万+
这是一个使用RelativeLayout+RadiouGroup+ImageView制作的中间凸起的按钮效果，效果如下： TabDemo源码下载
最简单靠谱的底部导航栏实现！！！
海象先生
11-12 1561
前言Android实现底部导航栏的方式很多，有5种实现方式。 作者使用过两种：RadioGroup+Fragment；FragmentTabHost；其中第一种更容易上手。实现效果目录 创建RadioGroup 监听，切换 Fragment 创建RadioGroup <RadioGroup android:id="@+id/radiogroup" android:l
安卓实现首页底部导航菜单中间图标凸起效果
智玲君
05-06 2548
效果图 1，Activity代码如下： public class ThirdActivity extends BaseActivity { @BindView(R.id.fl_layout) FrameLayout flLayout; @BindView(R.id.radioGroup) RadioGroup radioGroup; @BindView(...
android 实现底部导航栏中间突出
最新发布
05-13
1. 创建一个自定义的底部导航栏布局，在布局文件中添加一个中间突出的按钮，可以使用ImageView或者Button来实现。 2. 在Activity中设置底部导航栏，使用setContentView()方法将自定义的底部导航栏布局加载到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值