android高仿美团筛选控件,Android高仿美团首页分类按钮
惯例,先上GIF
栗子.gif更新v1.1版本 2017-6-2 11:55:30
详见github
一、使用姿势
1、引入(使用Gradle或者Maven)
1)Gradleallprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
compile 'com.github.FJ917:FJMtSortButton:v1.1'
}
2)Maven
jitpack.io
https://jitpack.io
com.github.FJ917
FJMtSortButton
v1.1
2、使用方法
1)xml文件
android:id="@+id/soreButton"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="170dp"/>
2)java文件
1.对自定义控件做一些设置//设置界面监听
soreButton.setViewControl(this);
//添加界面到list
list = new ArrayList<>();
list.add(R.layout.viewpager_page);
list.add(R.layout.viewpager_page);
list.add(R.layout.viewpager_page_text);
//控件相关设置
soreButton
//设置选中和未选中指示器图标
.setIndicator(R.drawable.radio1,R.drawable.radio2)
//设置指示器半间距px
.setDistance(10)
//设置view组
.setView(list)
.init();
将layout的布局add进去list中,然后调用setView方法把list传过去,
还提供了设置指示器图标的方法,以及指示器间距的方法,最后必须调用初始化方法init进行初始化
这是其中的一个layout布局,其实这里可以添加任意布局文件进去,是不是比美团更灵活呢?
布局R.layout.viewpager_page<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:background="#ffffff" >
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:horizontalSpacing="5dp"
android:numColumns="5"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
2.设置soreButton监听事件(具体的可以参考GIt上面的Demo,Git地址文章末尾)public class MainActivity extends AppCompatActivity implements ViewControl {
private SoreButton soreButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
soreButton = (SoreButton) findViewById(R.id.soreButton);
soreButton.setViewControl(this);
}
@Override
public void setView(View view, final int type) {
//这里会返回前面设置进去的View及对应的type,然后就可以进行操作了
}
}
划重点:上面的list中可以传入任意layout布局,然后通过接口回掉拿到View。比美团更加灵活。好了使用姿势已经讲完了,伸手可以撤退了~ 接下来开始讲讲实现原理
二、实现原理
1. 需求分析
需求.png
界面:分为两部分,上面的按钮以及下面的指示点。上面使用ViewPager作为View的容器,下面的指示器用LinearLayout将动态创建的ImageView添加进去。
ViewPager中的按钮使用GridView来做,当然这一部分我们需要做的灵活些,不一定只放按钮,也可以方其他View,超越美团,//手动滑稽。
重点:通过自定义组合控件的方式来进行封装,方便以后的使用。
2.下面开始封装
1)xml<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
android:id="@+id/viewPager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
android:layout_below="@+id/viewPager"
android:id="@+id/llIndicator"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#ffffff"
android:gravity="center"
android:orientation="horizontal" >
和普通的布局没啥区别,外层LinearLayout垂直布局,其中有ViewPager作为滑动切换的容器,内部的LinearLayout作为指示器容器。
2)自定义控件SoreButton.java
设置了默认值变量,以及控件和接口定义Context mContext;
private ViewPager viewPager;
private LinearLayout llIndicator;
//选中图片
private int RadioSelect = R.drawable.radio_select;
//未选中图片
private int RadioUnselected = R.drawable.radio_unselected;
//圆点间距
private int distance = 10;
List listSoreView = new ArrayList<>();
View soreView;
private List listView;
//接口
private ViewControl viewControl;
//设置接口
public void setViewControl(ViewControl viewControl) {
this.viewControl = viewControl;
}
拿到了自定义控件的布局中ViewPager和LinearLayout,并且设置了一个空布局。public SoreButton(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
LayoutInflater.from(context).inflate(R.layout.anfq_sore_button, this, true);
viewPager = (ViewPager) findViewById(R.id.viewPager);
llIndicator = (LinearLayout) findViewById(R.id.llIndicator);
//设置空布局
listView = new ArrayList<>();
listView.add(R.layout.viewpager_default);
}
对外提供的参数设置方法,当调用了init()方法后,会调用initViewPager方法进行ViewPager的初始化。/**
* 设置圆点距离
* @param distance --距离
* @return
*/
public SoreButton setDistance(int distance){
this.distance = distance;
return this;
}
/**
* 设置指示器图片
* @param radioSelect --选中图片
* @param radioUnselected --未选中图片
* @return
*/
public SoreButton setIndicator(int radioSelect,int radioUnselected){
//选中图片
RadioSelect = radioSelect;
//未选中图片
RadioUnselected = radioUnselected;
return this;
}
/**
* 设置view
* @param listView --view
* @return
*/
public SoreButton setView(List listView){
this.listView = listView;
return this;
}
/**
* 设置初始化
*/
public SoreButton init(){
initViewPager();
return this;
}
接下来我们看看initViewPager中都做了那些操作//初始化ViewPager
private void initViewPager(){
listSoreView = new ArrayList<>();
LayoutInflater layoutInflater = (LayoutInflater)
mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int size = listView.size();
for (int i = 0; i
//循环拿到传入的View
soreView = layoutInflater.inflate(listView.get(i), null);
//通过接口回掉的形式返回当前的View,实现接口后开源拿到每个View然后进行操作
if (viewControl!=null){
viewControl.setView(soreView,i);
}
//将获取到的View添加到List中
listSoreView.add(soreView);
}
//设置viewPager的Adapter
viewPager.setAdapter(new ViewPagerAdapter(listSoreView));
//初始化LinearLayout,加入指示器
initLinearLayout(viewPager, size, llIndicator);
}
因为之前调用了setView方法,传入了一组布局,我们通过循环来拿到这组View并添加到list中,然后设置到viewPager的Adapter,然后调用initLinearLayout方法初始化指示器。
接下来我们来看initLinearLayout中又做了那些操作/**
* 设置指示器,设置ViewPager滑动事件监听
* @param viewPager --ViewPager
* @param pageSize --View的页数
* @param linearLayout --LinearLayout
*/
private void initLinearLayout(ViewPager viewPager, int pageSize, LinearLayout linearLayout) {
//定义数组放置指示器的点,pageSize是View个数
final ImageView[] imageViews = new ImageView[pageSize];
for (int i = 0; i
//创建ImageView
ImageView image = new ImageView(mContext);
//将ImageView放入数组
imageViews[i] = image;
//默认选中第一个
if (i == 0) {
//选中的点
image.setImageResource(RadioSelect);
} else {
//未选中的点
image.setImageResource(RadioUnselected);
}
//设置宽高
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(distance, 0, distance, 0);
//将点添加到LinearLayout中
linearLayout.addView(image, params);
}
//ViewPager的滑动事件
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrollStateChanged(int arg0) {}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}
@Override
public void onPageSelected(int arg0) {
//arg0当前ViewPager
for (int i = 0; i
//设置为选中的点
imageViews[arg0].setImageResource(RadioSelect);
//判断当前的点i如果不等于当前页的话就设置为未选中
if (arg0 != i) {
imageViews[i].setImageResource(RadioUnselected);
}
}
}
});
}
定义了一个数组,用来放置指示器的点,通过循环pageSize来动态创建ImageView,然后判断i来将第一页的ImageView设置为选中的点,其余设置为未选中的点。接着设置了宽高,然后添加到LinearLayout中。
当然这样还不行,在viewPager滑动的时候我们得更新指示器上的点
我们对ViewPager设置了监听事件setOnPageChangeListener,在滑动的时候会调用onPageSelected,在这里可以拿到当前页,之后我们通过循环刚刚的数组,将当前页对应的点设置为选中图标,不等于当前页的设置为未选中的点。
**然后就没有然后了,封装完成~
这样就可以通过上面所说的方式,来使用这个自定义控件实现仿美团的效果,而且不止是仿美团的效果,可以传入其他View,来实现其他效果。比如:稍加改动布局的话可以作为应用的启动引导页。
**总结:通过自定义组合控件,可以对一些常用的布局以及逻辑代码进行封装,以减少使用时代码量,使得代码更加简洁。
android高仿美团筛选控件,Android高仿美团首页分类按钮相关推荐
- android可以剪辑代码的控件,Android 仿抖音视频裁剪范围选择控件,支持本地视频和网络视频...
实现后效果:由于是在模拟器上跑的背面的封面列表加载不出来,实际效果请真机运行 image.png 具体代码如下: 绘制上层滑动控件部分 package com.cj.customwidget.widg ...
- android 仿旅游日历控件_Android实现仿魅族日历首页功能
flyme5.0增加了很多优美的动画和交互,界面也变得相当精致.我手头现在就用着魅族MX5,感觉还不错哇!经常会打开它的日历看计划等,感觉它首页的滑动效果还不错,就试着实现一把. 效果分析 1 该首页 ...
- android好用的曲线图控件,Android图表控件MPAndroidChart——曲线图LineChart的使用(多条曲线)...
发现最新的MPAndroidChart和以前版本的使用有一些差距,就写下了现在新版的使用方法 相关文章: Android图表控件MPAndroidChart的简单介绍(MPAndroidChart3. ...
- android将被代替的控件,Android 控件被忽略的属性
作者:ivm 参考了 http://www.cnblogs.com/jisheng/archive/2013/01/10/2854088.html 导航栏: 1.TextView autoLink H ...
- android加一减一控件,Android的步进器(增加/减少值)控件?
用于Android的步进器(增/减值)控件? 没有像Android中的Stepper这样的内置控件 但是您可以尝试这种方式 android:layout_width="wrap_conten ...
- android多个下拉控件,Android实现支持所有View的通用的下拉刷新控件
下拉刷新对于一个app来说是必不可少的一个功能,在早期大多数使用的是chrisbanes的PullToRefresh,或是修改自该框架的其他库.而到现在已经有了更多的选择,github上还是有很多体验 ...
- android 日期下拉选择控件,Android 中日期控件与下拉列表的使用
1.在一个EditText 中单击一下可以弹出日期对话框: private static int START; private int mYear; private int mMonth; priva ...
- 动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- android 当前置顶的控件,Android利用RecyclerView实现全选、置顶和拖拽功能示例
前言 今天给大家分享是如何在RecyclerView实现全选,ItemTouchHelper实现侧滑删除,拖拽功能.比较基础.关于RecyclerView的强大,就不多说了.在Android L SD ...
最新文章
- 网络设置计算机,怎么重置电脑网络设置
- DGL RDKit | 基于Attentive FP可视化训练模型原子权重
- 位置传感器:电位器,电容位置传感器
- 微信阅读原文直接打开浏览器_微信打开网址添加在浏览器中打开提示
- 游戏服务器的架构演进
- unity协程_[C#进阶]C#实现类似Unity的协程
- PC端UU加速器加速Steam无法在社区留言问题
- 惠普暗影2 pro ubuntu16.04安装nvidia显卡驱动
- scrapy之spiders
- easyui中清空filebox的值
- 华为OD机试题:统计射击比赛成绩
- 提问的智慧 | 推荐好文
- 怎么制作GIF动图?用这两个工具,生成GIF超简单
- 疑为灵异现象不可思议的透明液晶揭秘
- Strategy (策略)模式
- Python个人博客项目-5.统计数据应用开发
- 数组与数字之间的转换
- 谷歌优化排名怎么做?Google SEO怎么优化?
- 透过镜头放大镜行业现状调研及趋势分析报告
- 编译原理18:布尔表达式
热门文章
- 一篇文章讲透控制反转和依赖注入
- 大数据分析R语言RStudio使用教程
- jadx反编译—下载和使用
- Error:Attempt to invoke virtual method ‘void android.widget.TextView.setText(java.lang.CharSeq
- 【沃顿商学院学习笔记】公益创业——04了解受益人Understanding the Beneficiary
- Origin画图技巧之设置框图默认设置
- 智能扫描王 v1.0.0
- 怎样才算通用人工智能?
- ubuntu16.04+七彩虹GTX1060的NVIDIA驱动+Cuda8.0+cudnn5.1+tensorflow+keras搭建深度学习环境【学习笔记】【原创】
- Enovia文件协作服务器安装,NX与Enovia集成安装配置手册_jimmy.docx