Android自定义滚动条——城市列表

简介: 绘制滚动条区别选中与未选择文字绘制等高间距滑动事件监听解析承载城市数据的XML文件下载XML文件解析文件适配器建立适配器类适配器子项视图效果图代码适配器绑定单向绑定


绘制滚动条



区别选中与未选择文字

private void init() {
        mLetterList = Arrays.asList(INDEX_STRING);
        mTextNormalColor = Color.parseColor("#000000");
        mTextSelectedColor = Color.parseColor("#ff0000");
    }


绘制等高间距

将一个布局高度绘制成26等份,对应26个字母

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int height = getHeight();
        int width = getWidth();
        int singleHeight = height / mLetterList.size(); // 获取每一个字母的高度
        for (int i = 0; i < mLetterList.size(); i++) {
            mPaint.setColor(mTextNormalColor);
            mPaint.setTypeface(Typeface.DEFAULT);
            mPaint.setAntiAlias(true);
            mPaint.setTextSize(32);
            // 选中的状态
            if (i == mChoose) {
                mPaint.setColor(mTextSelectedColor);
                mPaint.setFakeBoldText(true);
            }
            // x 坐标等于中间-字符串宽度的一半
            float xPos = width / 2.0f - mPaint.measureText(mLetterList.get(i)) / 2;
            float yPos = singleHeight * i + singleHeight / 2.0f;
            canvas.drawText(mLetterList.get(i), xPos, yPos, mPaint);
            mPaint.reset(); // 重置画笔
        }


滑动事件监听

 public boolean onTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY(); // 点击 y 坐标
        // 点击 y 坐标所占总高度的比例*b数组的长度就等于点击 b 中的个数
        final int c = (int) (y / getHeight() * mLetterList.size());
        switch (action) {
            case MotionEvent.ACTION_UP:
                if (mOnTextPositionChangedListener != null) {
                    mOnTextPositionChangedListener.onActionUp();
                }
                mChoose = -1;
                invalidate();
                break;
            default:
                if (mChoose != c) {
                    if (c >= 0 && c < mLetterList.size()) {
                        if (mOnTouchLetterChangedListener != null) {
                            mOnTouchLetterChangedListener.onTouchingLetterChanged(mLetterList.get(c));
                        }
                        mChoose = c;
                        invalidate();
                    }
                }
                if (mOnTextPositionChangedListener != null && y >= 0 && y <= getHeight()) {
                    mOnTextPositionChangedListener.onTextPositionChanged(mLetterList.get(mChoose), (int) y);
                }
                break;
        }
        return true;
    }


解析承载城市数据的XML文件



下载XML文件

从网上下载一个包含全部城市、城市代码、城市拼音首字母的文件,可以是xml格式亦或json格式


解析文件

从xml文件中取出城市数据,按城市名称、城市代码、城市首字母三个信息为一组,实例化实体类对象,并保存到列表中

private void InitCityInfo(){
        AllCityList = new ArrayList<>(  );
        String[] cityArray = getResources().getStringArray(R.array.city);
        // 侧边栏的索引字母
        ArrayList<String> indexList = new ArrayList<>();
        String curGroup = "0";
        for (int i = 0; i < cityArray.length; i += 3) {
            CityInfo cityInfo = new CityInfo(cityArray[i], cityArray[i + 1], cityArray[i + 2],
                    false, false);
            if (!cityInfo.getGroup().equals(curGroup)) {
                // 如果当前城市的 group 信息与保存的不一致, 那么就是该 group 的第一个
                cityInfo.setIsFirstInGroup(true);
                // 同时将该 group 信息添加到索引中
                indexList.add(cityInfo.getGroup());
                // 它的上一个城市就是上一个 group 的最后一个
                if (i > 0) {
                    AllCityList.get(AllCityList.size() - 1).setIsLastInGroup(true);
                }
                curGroup = cityInfo.getGroup();
            }
            AllCityList.add(cityInfo);
        }
        //AllCitiesScrollBar.setIndexText(indexList);
    }


适配器



建立适配器类

将解析出的城市数据,添加到RecyclerView子项中

public class AllCitiesReclcyerView extends RecyclerView.Adapter<AllCitiesReclcyerView.ViewHolder> {
    private List<CityInfo> mCityInfo;
    public AllCitiesReclcyerView(List<CityInfo> mCityInfo){
      this.mCityInfo = mCityInfo;
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from( parent.getContext() ).inflate( R.layout.allcities_recyclerview_item,null,false );
        return new ViewHolder( view );
    }
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
       CityInfo cityInfo = mCityInfo.get( position );
        holder.CityName.setText( cityInfo.getCityName());
    }
    @Override
    public int getItemCount() {
        return mCityInfo.size();
    }
    public int getPositionForSection(char section) {
        for (int i = 0; i < getItemCount(); i++) {
            String group = mCityInfo.get(i).getGroup();
            char firstChar = group.charAt(0);
            if (firstChar == section) {
                return i;
            }
        }
        return -1;
    }
    class ViewHolder extends RecyclerView.ViewHolder{
        private TextView CityName;
        public ViewHolder(@NonNull View itemView) {
            super( itemView );
            CityName = itemView.findViewById( R.id.CityName );
        }
    }
}


适配器子项视图

效果图

image.png


代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/AllCities"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
    <com.example.ChooseCity.SideBar
        android:id="@+id/AllCitiesScrollBar"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="25dp"
        android:background="@drawable/sidebar_style"/>
<!--  提示文字  -->
    <TextView
        android:id="@+id/CityTipsText"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:gravity="center"
        android:textSize="24sp"
        android:textColor="#C5C2C2"
        android:background="@drawable/scrollbar_tipstext_style"
        android:layout_toLeftOf="@+id/AllCitiesScrollBar"
        android:visibility="invisible"/>
</RelativeLayout>


适配器绑定

View AllCities = LayoutInflater.from( City.this).inflate( R.layout.choosecity_recyclerview1,null);
        AllCities_RecyclerView = AllCities.findViewById( R.id.AllCities );
        AllCitiesScrollBar = AllCities.findViewById( R.id.AllCitiesScrollBar );
        CityTipsText = AllCities.findViewById( R.id.CityTipsText );
        LinearLayoutManager manager1 = new LinearLayoutManager( City.this );
        AllCities_RecyclerView.setLayoutManager( manager1 );
        AllCitiesReclcyerView allCitiesReclcyerView = new AllCitiesReclcyerView( AllCityList );
        AllCities_RecyclerView.setAdapter( allCitiesReclcyerView );
        //分割线

此语句作用为:为每一个子项之间添加一个分割线

 AllCities_RecyclerView.addItemDecoration(new CityItemDecoration(AllCityList));


单向绑定


通过滑动滚动条,相应的改变RecyclerView子项位置;并对滑到的滚动条字母进行突出显示

AllCities_RecyclerView.addItemDecoration(new CityItemDecoration(AllCityList));
        AllCitiesScrollBar.setOnTouchLetterChangedListener( new SideBar.OnTouchingLetterChangedListener() {
            @Override
            public void onTouchingLetterChanged(String s) {
                int position = allCitiesReclcyerView.getPositionForSection(s.charAt(0));
                if (position != -1) {
                    manager1.scrollToPositionWithOffset(position, 0);
                }
            }
        } );
        AllCitiesScrollBar.setOnTextPositionChangedListener( new SideBar.OnTextPositionChangedListener() {
            @Override
            public void onTextPositionChanged(String c, int y) {
                CityTipsText.setVisibility(View.VISIBLE);
                int sideBarY = AllCitiesScrollBar.getTop();
                int topMargin = sideBarY + y - CityTipsText.getHeight() / 2;
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) CityTipsText.getLayoutParams();
                lp.topMargin = topMargin;
                CityTipsText.setLayoutParams(lp);
                CityTipsText.setText(c);
            }
            @Override
            public void onActionUp() {
                CityTipsText.setVisibility(View.INVISIBLE);
            }
        } );
相关文章
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
37 3
|
1月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
74 0
|
3月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
76 2
基于Android P,自定义Android开机动画的方法
|
3月前
|
供应链 物联网 区块链
未来触手可及:探索新兴技术的趋势与应用安卓开发中的自定义视图:从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展,新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景,带你领略未来的可能性。
|
3月前
|
测试技术 Android开发 Python
探索软件测试的艺术:从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中,测试是不可或缺的一环。它如同艺术一般,需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言,引领读者从软件测试的基础出发,逐步深入到更复杂的测试策略和工具的使用,最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能,就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
|
12天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
14天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
27 5
|
1月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
60 10
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
44 3