Android选中突出背景效果的底部导航栏

本文介绍了如何在Android中实现底部导航栏的选中突出效果,通过分析UI并利用贝塞尔曲线来绘制突出部分。首先尝试使用图片切换,但未达到预期效果。接着使用Path和Paint API,通过画出贝塞尔曲线来创建突出背景,并调整画笔样式以填充白色背景。在遇到四阶贝塞尔曲线限制后,改为使用三个二阶贝塞尔曲线实现。最终通过计算各个控制点的位置,成功实现动态切换选中状态的效果,并提供了完整代码示例。
摘要由CSDN通过智能技术生成

今天在群里看到一个底部导航选中突出效果像这样

就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出

第一种方法

简单快捷,让UI帮忙切几张带突出背景的图片,

选中切换图片简单粗暴

在群里找小伙伴要了UI的切图一看给的6张图片一样大小,也不带突出背景

于是想着有没有第二种方法实现

百度了许久也许是我找的方法不对,也许是大家都没遇到这样的UI。

怎么办,自己想想,静下心来看UI效果,发现突出的地方有点像贝塞尔曲线

再细细分析一下,如果突出的是贝塞尔曲线那么如何画出一条直线,固定的位置突出呢

贝塞尔曲线是Path 里面的api,而Path 是可以连续画线的,

那么就好实现了,前面直接设置起点 

mPath.moveTo(0, 0);//起始点

然后中间是直接的直接调用 

mPath.lineTo(x,y);

需要突出就调用二阶贝塞尔曲线

mPath.quadTo(x1,y1,x2,y2);

果然可行,画出来效果是这样

不错 实现第一步了,但是仔细观察发现 人家下面是有白色背景的,突出的地方也要白色背景,怎么搞呢!

又去查了下Path 和Paint Api 发现 有一种方法可以实现这样的效果

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

画笔要设置成 这种风格的

mPath.lineTo(getWidth(), getHeight());
mPath.lineTo(0, getHeight());
mPath.close(); //封闭path路径

Path路径全部占满

然后就可以实现效果了

记得把画笔颜色设置成白色的哦

mPaint.setColor(Color.WHITE);
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用自定义的底部导航栏来实现这个效果。具体的实现步骤如下: 1. 创建一个自定义的底部导航栏布局,在布局文件中添加一个中间突出的按钮,可以使用ImageView或者Button来实现。 2. 在Activity中设置底部导航栏,使用setContentView()方法将自定义的底部导航栏布局加载到Activity中。 3. 在代码中设置底部导航栏选中项、未选中项的图标和文字等。 4. 对中间突出的按钮进行特殊处理,例如设置监听器、在选中状态下显示不同的图标等。 以下是一个简单的实现步骤示例: 1. 创建一个自定义的底部导航栏布局,例如bottom_navigation_layout.xml: ``` <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@color/white"> <ImageView android:id="@+id/bottom_nav_item1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item1_unselected" android:contentDescription="@string/nav_item1"/> <ImageView android:id="@+id/bottom_nav_item2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item2_unselected" android:contentDescription="@string/nav_item2"/> <ImageView android:id="@+id/bottom_nav_item3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item3_unselected" android:contentDescription="@string/nav_item3"/> <ImageView android:id="@+id/bottom_nav_item_center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_nav_item_center_unselected" android:contentDescription="@string/nav_item_center"/> <ImageView android:id="@+id/bottom_nav_item4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item4_unselected" android:contentDescription="@string/nav_item4"/> <ImageView android:id="@+id/bottom_nav_item5" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_nav_item5_unselected" android:contentDescription="@string/nav_item5"/> </LinearLayout> ``` 2. 在Activity中设置底部导航栏,例如MainActivity.java: ``` public class MainActivity extends AppCompatActivity { private ImageView navItem1, navItem2, navItem3, navItemCenter, navItem4, navItem5; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化底部导航栏控件 initView(); // 设置底部导航栏默认选中项 setNavItemSelected(navItem1); } /** * 初始化底部导航栏控件 */ private void initView() { navItem1 = findViewById(R.id.bottom_nav_item1); navItem2 = findViewById(R.id.bottom_nav_item2); navItem3 = findViewById(R.id.bottom_nav_item3); navItemCenter = findViewById(R.id.bottom_nav_item_center); navItem4 = findViewById(R.id.bottom_nav_item4); navItem5 = findViewById(R.id.bottom_nav_item5); // 设置底部导航栏监听器 navItem1.setOnClickListener(navItemSelectedListener); navItem2.setOnClickListener(navItemSelectedListener); navItem3.setOnClickListener(navItemSelectedListener); navItemCenter.setOnClickListener(navItemSelectedListener); navItem4.setOnClickListener(navItemSelectedListener); navItem5.setOnClickListener(navItemSelectedListener); } /** * 底部导航栏监听器 */ private View.OnClickListener navItemSelectedListener = new View.OnClickListener() { @Override public void onClick(View view) { // 设置底部导航栏选中项 setNavItemSelected(view); } }; /** * 设置底部导航栏选中项 */ private void setNavItemSelected(View view) { // 设置底部导航栏选中项的图标和文字 navItem1.setImageResource(R.drawable.ic_nav_item1_unselected); navItem2.setImageResource(R.drawable.ic_nav_item2_unselected); navItem3.setImageResource(R.drawable.ic_nav_item3_unselected); navItem4.setImageResource(R.drawable.ic_nav_item4_unselected); navItem5.setImageResource(R.drawable.ic_nav_item5_unselected); switch (view.getId()) { case R.id.bottom_nav_item1: navItem1.setImageResource(R.drawable.ic_nav_item1_selected); // 处理底部导航栏选中项1的事件 break; case R.id.bottom_nav_item2: navItem2.setImageResource(R.drawable.ic_nav_item2_selected); // 处理底部导航栏选中项2的事件 break; case R.id.bottom_nav_item3: navItem3.setImageResource(R.drawable.ic_nav_item3_selected); // 处理底部导航栏选中项3的事件 break; case R.id.bottom_nav_item_center: // 处理底部导航栏中间按钮的事件 break; case R.id.bottom_nav_item4: navItem4.setImageResource(R.drawable.ic_nav_item4_selected); // 处理底部导航栏选中项4的事件 break; case R.id.bottom_nav_item5: navItem5.setImageResource(R.drawable.ic_nav_item5_selected); // 处理底部导航栏选中项5的事件 break; } } } ``` 3. 对中间突出的按钮进行特殊处理,例如在选中状态下显示不同的图标,例如ic_nav_item_center_selected.png: ``` navItemCenter.setImageResource(R.drawable.ic_nav_item_center_selected); ``` 4. 最后,你需要添加底部导航栏的点击事件处理,以及实现对应的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值