自定义View之仿ios分段选择器

最新推荐文章于 2024-05-19 09:38:57 发布
最新推荐文章于 2024-05-19 09:38:57 发布
阅读量631 收藏 2
点赞数
分类专栏： 自定义view 文章标签： 自定义view 分段选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_Xiaozuo/article/details/82981880
版权

一：效果

1.1 可动态添加或删除tab，更改指定tab的文字。

二：实现思路

  1. 自定义view，实现效果
  2. 动态创建textview，有几个tab创建几个textview
  3. 第一个tab和最后一个tab为圆角矩形，其余的为直角矩形，通过shape文件完成
  4. 默认选中第一个tab选项，更改背景颜色和textview颜色，更改其余所有tab的颜色
  5. 设置点击事件，动态更改每一个tab的颜色

三：代码实现

思路我们已经清晰了，下面按照我们的思路编码就行了，没什么难度，下面我就直接贴出代码了，有需要的同学直接拿去用就好了。

在这里重点说一下每个tab中间的分割线，如果不单独做处理的话，你会发现tab的分割线和边框线宽度不一致，影响整体美观度，是因为第一个tab绘制了一遍分割线，第二个tab又绘制了一遍分割线。

博主的处理方式为：

  1. 为整个自定义view设置一个整体的边框
  2. 每个tab只设置右边的一条边框，最后一个tab不设置边框，采用 <layer-list> 实现

3.1 自定义view代码

package com.zuohp.jstt.widget;

import android.content.Context;
import android.content.res.ColorStateList;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;


import com.zuohp.jstt.R;

import java.util.ArrayList;
import java.util.List;

public class SegmentView extends LinearLayout {
    // 实现不同的按钮状态，不同的颜色
    ColorStateList cs1 = getResources().getColorStateList(R.color.white);
    ColorStateList cs2 = getResources().getColorStateList(R.color.colorPrimaryDark);
    private onSegmentViewClickListener segmentListener;
    //存放textview的集合
    List<TextView> views = new ArrayList<TextView>();

    // 这是代码加载ui必须重写的方法
    public SegmentView(Context context) {
        super(context);
    }
    // 这是在xml布局使用必须重写的方法
    public SegmentView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SegmentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    //主要方法
    public void contentView(String[] text,int dp){
        this.removeAllViews();
        this.setBackgroundResource(R.drawable.segment_lin_bg);
        for (int i = 0; i < text.length; i++) {
            final TextView textView = new TextView(getContext());
            textView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
            textView.setText(text[i]);
            textView.setGravity(Gravity.CENTER);
            textView.setPadding(5, 14, 5, 14);
            textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);
            if (i==0){//第一个
                textView.setBackgroundResource(R.drawable.segment_left);
                textView.setSelected(true);
                textView.setTextColor(cs2);
            }else if (i==text.length-1){//最后一个
                textView.setBackgroundResource(R.drawable.segment_right);
                textView.setTextColor(cs1);
            }else {//中间的
                textView.setBackgroundResource(R.drawable.segment_centre);
                textView.setTextColor(cs1);
            }
            //设置id方便在设置点击事件的时候区分是那个view
            textView.setId(i);
            views.add(textView);
            this.addView(textView);
            //设置点击事件
            textView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    for (TextView view:views) {
                        view.setSelected(false);
                        view.setTextColor(cs1);
                    }
                    views.get(v.getId()).setSelected(true);
                    views.get(v.getId()).setTextColor(cs2);
                    if (segmentListener != null) {
                        segmentListener.onSegmentViewClick(textView, v.getId());
                    }
                }
            });

        }
        this.invalidate();//重新draw()

    }

    /**
     * 设置控件显示的文字
     *
     * @param text
     * @param position
     */
    public void setSegmentText(CharSequence text, int position) {
   }

    // 定义一个接口接收点击事件
    public interface onSegmentViewClickListener {
        public void onSegmentViewClick(View view, int postion);
    }

    public void setOnSegmentViewClickListener(onSegmentViewClickListener segmentListener) {
        this.segmentListener = segmentListener;
    }
}

3.2 shape文件 ---- segment_lin_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="20dp"/>
    <padding
        android:right="1dp"
        android:left="1dp"
        android:top="1dp"
        android:bottom="1dp"
        />
    <stroke android:width="1dp" android:color="@color/white" />
</shape>

3.3 shape文件 ---- segment_left

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="@color/white"/>
            <corners
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>
    <item>
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@color/colorPrimaryDark"  />
                    <corners
                        android:bottomLeftRadius="20dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="20dp"
                        android:topRightRadius="0dp" />
                </shape>
            </item>
            <item
                android:width="1dp"
                android:gravity="right" >
                <shape>
                    <solid
                        android:color="@color/white"/>
                </shape>
            </item>

        </layer-list>

    </item>
</selector>

3.4 shape文件 ---- segment_right

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/colorPrimaryDark" />
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="20dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>
</selector>

3.5 shape文件 ---- segment_centre

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <item>
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@color/colorPrimaryDark"  />
                </shape>
            </item>
            <item
                android:width="1dp"
                android:gravity="right" >
                <shape>
                    <solid
                        android:color="@color/white"/>
                </shape>
            </item>

        </layer-list>

    </item>
</selector>

3.6 xml文件

<android.support.v7.widget.Toolbar
        android:id="@+id/mToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="0dp"
        android:background="@color/colorPrimaryDark">
        <com.zuohp.jstt.widget.SegmentView
            android:id="@+id/segmentview"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal"
            >

        </com.zuohp.jstt.widget.SegmentView>
    </android.support.v7.widget.Toolbar>

3.7 使用代码

SegmentView segmentView = findViewById(R.id.segmentview);
        segmentView.contentView(new String[]{"TAB1","TAB2","TAB3"},16);
        segmentView.setOnSegmentViewClickListener(new SegmentView.onSegmentViewClickListener() {
            @Override
            public void onSegmentViewClick(View view, int postion) {
                switch (postion){
                    case 0:
                        Toast.makeText(MainActivity.this,"点击了tab1",Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(MainActivity.this,"点击了tab2",Toast.LENGTH_SHORT).show();
                        break;
                    case 2:
                        Toast.makeText(MainActivity.this,"点击了tab3",Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });

四：结语

如有更好的方式或者不对的地方，欢迎指出！

祝：工作顺利！

Hello__code
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 仿iOS UISegmentedControl
u011209659的博客
12-13 368
  完整项目：Github，包括使用说明https://github.com/CodeManLH/SegmentedControl 先上图 写项目时有个需求需要展示SegmentedControl（分段控制器），iOS是有的，可惜Android没有，本来想网上找一个用的，但是都不符合需求，项目用的是两行，网上大多数都是用RadioGroup，去实现的，这里我用自定义继承LinearL...
仿ios分段选择器(自定义radiogroup)
ly635676581的专栏
11-17 2690
仿ios分段选择器的简易实现方式.通过自定义RadioButton实现
android仿ios实现分段选择控件UISegmentedControl
阳光心态的博客
09-07 5399
在ios7中有一种扁平风格的控件叫做分段选择控件UISegmentedControl，控件上横放或竖放着几个被简单线条隔开的按钮，每次点击能切换不同的按钮和按钮所对应的界面，比如qq客户端V6.5.3版本中消息页与电话页分离就是用的这种原理。但是很可惜的是Android系统并没有自带这种控件，不过我们也可以通过自定义RadioGroup实现该类效果，幸运的是Github上已有开源：https://g
推荐一款强大的iOS自定义分段控件：SMSegmentView
最新发布
gitblog_00095的博客
05-19 832
推荐一款强大的iOS自定义分段控件：SMSegmentView 项目地址:https://gitcode.com/sima-11/SMSegmentView 在这个不断追求个性化和用户体验的时代，iOS开发者们总是在寻找超越系统默认组件的新方式。今天，我想要向大家推荐一个由Swift编写的开源项目——SMSegmentView，它是一个高度可定制的分段控制器，可以为你的应用界面增添独特的魅力。 1...
【IOS-初学】利用分段选择器和滑动开关（条）等等实现简单的图片浏览器-透明度和图片切换功能
weixin_44002043的博客
09-16 729
目前我并不是直接专门学习ObjectC的语言来开发iOS，只是先跟着教学内容走；对一些语法只能照瓜画瓢。两者移动端的存在很多相似点，例如MVVM的编程思想在两端如阴阳两极一样交融，很多东西都是值得融汇贯通的。
仿IOS分段选择器(自定义RadioGroup)
11-17
通过以上步骤，我们可以实现一个基本的仿iOS分段选择器。在实际项目中，可能还需要处理更多细节，如触摸反馈、点击事件的传播等。不断优化和调整，才能使组件更加完善和稳定。同时，也要注意代码的模块化，以便于...
ios-自定义封装分段选择的类似segment，比较灵活.zip
07-11
本资源“ios-自定义封装分段选择的类似segment，比较灵活.zip”提供了一个自定义分段选择器的实现，旨在提高组件的可定制性和灵活性。 这个自定义分段选择器可能包括以下关键知识点： 1. **自定义视图（Custom ...
仿IOS的分段控件SegmentControl
01-20
总之，创建一个仿iOS的分段控件涉及到自定义视图、事件监听、背景选择器应用等多个Android开发基础知识点。掌握这些技能不仅有助于提高UI设计的灵活性，也有利于理解和学习Android视图系统的底层机制。通过实践和...
iOS分段控制器大全ZFJSegmentedControl
12-29
综上所述，`ZFJSegmentedControl`是一个强大的iOS分段控制器组件，它提供了丰富的定制选项，使得开发者能够轻松地在应用中创建美观且功能丰富的分段控制器。通过学习和实践，你可以充分利用这个库来提升你的应用界面...
ios-仿美团选择器.zip
07-11
下面将详细介绍如何在iOS应用中创建这样的分段选择器。 首先，我们需要了解iOS中的UI组件。在这个场景中，主要涉及两种UI元素：`UISegmentedControl`和`UITableView`。`UISegmentedControl`用作各个层级的标题，...
ios-简单的分段选择.zip
07-11
简单的分段选择
分段选择ARSegmentPager(iOS源码)
03-16
作者：AugustRush 介绍：自定义一个简单的segmentController，使用方便，autolayout，header有parallax 效果，轻松实现代码复杂分页控制器的代码分离。 测试环境：xcode6.3 ios8.3。 效果图：
iOS常用分段选择器
04-06
作者hcsaaron，源码CSSegmentedControl，常用分段选择器，简单易用低耦合，常用的自定义SegmentedControl，支持文字、文字+图片，自定义各种常用样式等，简单易用。
iOS 自定义滑动分段选择Slider
01-28
iOS 自定义滑动分段选择Slider 非常养眼
iOS 分段选择器
08-14
类似于网易新闻分类条，主要通过UIscrollView实现，想学习的同学可以下载下来研究一下
iOS项目模仿之喜马拉雅（三）—— 分段选择器实现
讴歌的专栏
03-07 1792
封装控件在iOS开发中是常遇到的事，如果项目比较赶的话，我们可以用别人写好的开源项目，但是对于技术提升来说，最好还是自己封装，这是一个app的模仿，我们的目的就是要提高技术水平，所以尝试封装一下。记录自己的思路，有时间对比一下别人的思路，可以收获更多，当然自己思考在前，免得受到别人的影响。下面就这个项目而言，我们封装一下分段选择栏。 基本看一下app就会发现分段选择栏在多处被用到了。分析一下它们
iOS-滑竿、分段选择器、开关按钮的简单实现
圆缘园猿的博客
03-23 3048
滑竿、分段选择器、开关按钮的简单实现，它们都是UIControl的子类、下面是代码示例： #import "ViewController.h"   @interface ViewController () {     UIView *bgView;     UIImageView *animationView; } @end   @implementatio
ios自定义分段控件_使用swiftui自定义ios分段控件
06-11
使用SwiftUI自定义iOS分段控件可以通过以下步骤实现： 1. 创建一个新的SwiftUI View，命名为SegmentedControl。 2. 在SegmentedControl中定义一个枚举类型，用于表示分段控件中的选项。 3. 在SegmentedControl中定义一个@Binding属性用于绑定选中的选项。 4. 在SegmentedControl中使用ForEach循环遍历所有的选项，并将它们显示在分段控件中。 5. 在ForEach循环中，使用Button显示每一个选项，并在按钮的action中更新选中的选项。 6. 为分段控件添加样式，例如设置选中的选项的背景色和字体颜色等。 下面是一个简单的示例代码： ```swift enum SegmentedOption: String, CaseIterable { case option1 case option2 case option3 } struct SegmentedControl: View { @Binding var selectedOption: SegmentedOption var body: some View { HStack { ForEach(SegmentedOption.allCases, id: \.self) { option in Button(action: { self.selectedOption = option }) { Text(option.rawValue) .foregroundColor(self.selectedOption == option ? .white : .black) .padding(.horizontal, 20) .padding(.vertical, 10) .background(self.selectedOption == option ? Color.blue : Color.gray) .cornerRadius(10) } } } } } ``` 在使用时，只需要将SegmentedControl添加到需要显示的View中，并将选中的选项绑定到某个属性即可。例如： ```swift struct ContentView: View { @State private var selectedOption: SegmentedOption = .option1 var body: some View { VStack { SegmentedControl(selectedOption: $selectedOption) Text("Selected option: \(selectedOption.rawValue)") } } } ``` 这样就可以在界面上显示一个自定义的iOS分段控件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值