自定义dialog的频道选择器

最新推荐文章于 2021-05-25 18:46:02 发布
最新推荐文章于 2021-05-25 18:46:02 发布
阅读量513 收藏
点赞数
分类专栏： android 文章标签： GridLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/villa_mou/article/details/52810057
版权

这里写图片描述
效果图如上

我们一步一步把它撸出来
首先不考虑是dialog,搞个自定义的viewgroup来实现主要功能
先来看看这个viewgrop的xml布局,很简单,两个textview,两个gridlayout
注意这个属性 android:animateLayoutChanges=”true”,这个是为gridlayout设置内容变化时的动画.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_new_channl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="viewpager.villa.com.viewpagertransformer.NewChannlActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="已选频道:"/>
    <!-- 设置gridlayout改变时有动画-->
    <GridLayout
        android:id="@+id/selected_channel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:columnCount="4"></GridLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="未选频道:"/>

    <GridLayout
        android:animateLayoutChanges="true"
        android:id="@+id/unSelected_channel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="4"></GridLayout>

</LinearLayout>

这里写图片描述

package viewpager.villa.com.viewpagertransformer;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.GridLayout;
import android.widget.TextView;

public class NewChannlActivity2 extends AppCompatActivity {
    private String[] mSelectedChannels = {"北京", "中国", "国际", "体育", "育人", "生活", "旅游", "军事", "汽车"};

    private String[] mUnSeletedChannels = {"时尚", "娱乐", "呵呵", "嘿嘿", "羞羞", "巴拿马"};
    private GridLayout mSelectedChannel;
    private GridLayout mUnSelectedChannel;
    private int itemMargin;

    private static final int NOT_AT_GRID = -1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_new_channl);
        initView();
        initSelectedChannel();
        initUnSelectedChannel();
    }


    /**
     * 初始化没有选中的item
     */
    private void initUnSelectedChannel() {
        for (int i = 0; i < mUnSeletedChannels.length; i++) {
            TextView item = getTextView(mUnSeletedChannels[i]);
            item.setOnClickListener(mUnSelectedOnClickListener);
            mUnSelectedChannel.addView(item, 0);
        }
    }

    private View.OnClickListener mUnSelectedOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mUnSelectedChannel.removeView(v);
            TextView mTextView = (TextView) v;
            TextView textView = getTextView(mTextView.getText().toString());
            addSelectedItem(textView);

        }
    };

    /**
     * 初始化选中的item
     */
    private void initSelectedChannel() {
        for (int i = 0; i < mSelectedChannels.length; i++) {
            TextView item = getTextView(mSelectedChannels[i]);
            addSelectedItem(item);

        }
    }

    private void addSelectedItem(TextView item) {
        //为创建的每一个item设置长按点击事件

        item.setOnClickListener(mSelectedOnclickListener);
        mSelectedChannel.addView(item);
    }

    private View.OnClickListener mSelectedOnclickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mSelectedChannel.removeView(v);
            TextView mTextView = (TextView) v;
            addUnselectedItem(mTextView);
        }
    };

    private void addUnselectedItem(TextView mTextView) {
        TextView textView = getTextView(mTextView.getText().toString());
        textView.setOnClickListener(mUnSelectedOnClickListener);
        mUnSelectedChannel.addView(textView);
    }

    /**
     * 初始化view
     */
    private void initView() {
        mSelectedChannel = (GridLayout) findViewById(R.id.selected_channel);
        mUnSelectedChannel = (GridLayout) findViewById(R.id.unSelected_channel);
        //获取dimen值
        itemMargin = getResources().getDimensionPixelOffset(R.dimen.item_margin);
    }


    /**
     * 获取一个item的方法
     *
     * @param msg
     * @return
     */
    @NonNull
    private TextView getTextView(String msg) {
        TextView item = new TextView(this);
        GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
        int widthPixels = getResources().getDisplayMetrics().widthPixels;
        //这里不能直接去获取gridlayout的宽,因为这个方法在oncreate方法有调用,view还没有绘制完成,所以直接去获取屏幕的宽度像素
        layoutParams.width = widthPixels / 4 - 2 * itemMargin;
        layoutParams.height = ActionBar.LayoutParams.WRAP_CONTENT;
        layoutParams.setMargins(itemMargin, itemMargin, itemMargin, itemMargin);
        item.setLayoutParams(layoutParams);
        //设置每个item的gravity,中心,
        item.setGravity(Gravity.CENTER);
        item.setBackgroundResource(R.drawable.item_back_selector);
        item.setTextColor(getResources().getColorStateList(R.color.item_text_selector));
        item.setText(msg);
        return item;
    }


}

接下来我们来处理长按时,拖拽的效果
首先我们实现点击时添加或者删除的效果
这里要注意为从selectedLayout到unSelectedLayout的添加textview,需要设置点击事件,同样unSelectedLayout到selectedLayout也需要设置长按点击事件和点击事件
并且采用的一个矩形数组来存储位置
mRects[i] = new Rect(child.getLeft(), child.getTop(), child.getRight(), child.getBottom());把每个矩形item的位置存到矩形数组中,
孩子实现拖拽的代码就一行
v.startDrag(null, new View.DragShadowBuilder(v), null, 0);

package viewpager.villa.com.newchannel;

import android.content.Context;
import android.graphics.Rect;
import android.support.annotation.NonNull;
import android.support.v7.app.ActionBar;
import android.util.AttributeSet;
import android.view.DragEvent;
import android.view.Gravity;
import android.view.View;
import android.widget.GridLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/10/13 0013.
 */
public class NewsChannelView extends RelativeLayout {
    private static final String TAG = "ViewChannelView";
    private String[] mSelectedChannels = {"北京", "中国", "国际", "体育", "育人", "生活", "旅游", "军事", "汽车"};

    private String[] mUnSeletedChannels = {"时尚", "娱乐", "呵呵", "嘿嘿", "羞羞", "巴拿马"};
    private GridLayout mSelectedChannel;
    private GridLayout mUnSelectedChannel;
    private int itemMargin;
    private Rect[] mRects;
    private static final int NOT_AT_GRID = -1;
    public NewsChannelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View.inflate(getContext(),R.layout.activity_new_channl,this);
        init();
    }

    public NewsChannelView(Context context) {
        this(context,null);

    }

    private void init() {
        initView();
        initSelectedChannel();
        initUnSelectedChannel();
        setEvent();
    }
    private void initRects() {
        mRects = new Rect[mSelectedChannel.getChildCount()];
        for (int i = 0; i < mSelectedChannel.getChildCount(); i++) {
            View child = mSelectedChannel.getChildAt(i);
            mRects[i] = new Rect(child.getLeft(), child.getTop(), child.getRight(), child.getBottom());
        }
    }

    //为选中的gridlayout设置拖拽的监听
    private void setEvent() {
        mSelectedChannel.setOnDragListener(mOnDragListener);
    }

    private View.OnDragListener mOnDragListener = new View.OnDragListener() {
        @Override
        public boolean onDrag(View v, DragEvent event) {
            switch (event.getAction()) {
                //拖拽结束
                case DragEvent.ACTION_DRAG_ENDED:
                    mDragView.setSelected(false);
                    break;
                //进入父容器的范围
                case DragEvent.ACTION_DRAG_ENTERED:
                    break;
                //不再父容器范围内时调用
                case DragEvent.ACTION_DRAG_EXITED:
                    break;
                //拖拽位置改变过程中调用
                case DragEvent.ACTION_DRAG_LOCATION:
                    //实时的获取在gridlyout中的拖拽进入的孩子
                    int index = getChildIndex(event.getX(), event.getY());
                    //获取当前的需要移动到的目标孩子
                    View mTagart = mSelectedChannel.getChildAt(index);
                    //如果移动到了grid孩子中,就移除这个孩子
                    if (index != NOT_AT_GRID && mTagart != mDragView) {
                        //移动掉这个孩子
                        mSelectedChannel.removeView(mDragView);
                        //再把这个还在添加到移动到的位置,但是这里有个问题是移动到了自身的位置,所以前面需要加个判断
                        mSelectedChannel.addView(mDragView, index);
                    }
                    break;
                //拖拽开始,初始化矩形数组,以便判断孩子是不是在gridlayout范围内
                case DragEvent.ACTION_DRAG_STARTED:
                    initRects();
                    break;
                //拖拽终止
                case DragEvent.ACTION_DROP:
                    break;

            }
            return true;
        }
    };

    /**
     * 初始化没有选中的item
     */
    private void initUnSelectedChannel() {
        for (int i = 0; i < mUnSeletedChannels.length; i++) {
            TextView item = getTextView(mUnSeletedChannels[i]);
            item.setOnClickListener(mUnSelectedOnClickListener);
            mUnSelectedChannel.addView(item, 0);
        }
    }

    private View.OnClickListener mUnSelectedOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mUnSelectedChannel.removeView(v);
            TextView mTextView = (TextView) v;
            TextView textView = getTextView(mTextView.getText().toString());
            addSelectedItem(textView);

        }
    };

    /**
     * 初始化选中的item
     */
    private void initSelectedChannel() {
        for (int i = 0; i < mSelectedChannels.length; i++) {
            TextView item = getTextView(mSelectedChannels[i]);
            addSelectedItem(item);

        }
    }

    private void addSelectedItem(TextView item) {
        //为创建的每一个item设置长按点击事件
        item.setOnLongClickListener(mOnLongClickListener);
        item.setOnClickListener(mSelectedOnclickListener);
        mSelectedChannel.addView(item);
    }

    private View.OnClickListener mSelectedOnclickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mSelectedChannel.removeView(v);
            TextView mTextView = (TextView) v;
            addUnselectedItem(mTextView);
        }
    };

    private void addUnselectedItem(TextView mTextView) {
        TextView textView = getTextView(mTextView.getText().toString());
        textView.setOnClickListener(mUnSelectedOnClickListener);
        mUnSelectedChannel.addView(textView);
    }

    /**
     * 初始化view
     */
    private void initView() {
        mSelectedChannel = (GridLayout) findViewById(R.id.selected_channel);
        mUnSelectedChannel = (GridLayout) findViewById(R.id.unSelected_channel);
        //获取dimen值
        itemMargin = getResources().getDimensionPixelOffset(R.dimen.item_margin);
    }


    private View mDragView;
    private View.OnLongClickListener mOnLongClickListener = new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View v) {

            /**
             *  * @param data A {@link android.content.ClipData} object pointing to the data to be
             * transferred by the drag and drop operation.
             * shadowBuilder,拖拽时的阴影
             * myLocalState, This Object is put into every DragEvent object sent by the system during the
             * current drag.
             * 最后一个标志位,我们不需要标志位,设为0
             */
            v.startDrag(null, new View.DragShadowBuilder(v), null, 0);
            mDragView = v;
            mDragView.setSelected(true);
            return true;//表示我要消费这个事件
        }
    };

    /**
     * 获取一个item的方法
     *
     * @param msg
     * @return
     */
    @NonNull
    private TextView getTextView(String msg) {
        TextView item = new TextView(getContext());
        GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
        int widthPixels = getResources().getDisplayMetrics().widthPixels;
        //这里不能直接去获取gridlayout的宽,因为这个方法在oncreate方法有调用,view还没有绘制完成,所以直接去获取屏幕的宽度像素
        layoutParams.width = widthPixels / 4 - 2 * itemMargin;
        layoutParams.height = ActionBar.LayoutParams.WRAP_CONTENT;
        layoutParams.setMargins(itemMargin, itemMargin, itemMargin, itemMargin);
        item.setLayoutParams(layoutParams);
        //设置每个item的gravity,中心,
        item.setGravity(Gravity.CENTER);
        item.setBackgroundResource(R.drawable.item_back_selector);
        item.setTextColor(getResources().getColorStateList(R.color.item_text_selector));
        item.setText(msg);
        return item;
    }

    public int getChildIndex(float x, float y) {
        for (int i = 0; i < mRects.length; i++) {
            if (mRects[i].contains((int) x, (int) y)) {
                return i;
            }
        }
        return NOT_AT_GRID;
    }
}

这里写图片描述

最后我们来创建自己的dialog
布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="50dp"
    tools:context="viewpager.villa.com.newchannel.MainActivity">

    <viewpager.villa.com.newchannel.NewsChannelView
        android:id="@+id/ncv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></viewpager.villa.com.newchannel.NewsChannelView>
</RelativeLayout>

代码

package viewpager.villa.com.newchannel;

import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.WindowManager;

/**
 * Created by Administrator on 2016/10/13 0013.
 */
public class NewsChannalDialog extends Dialog {
    private static final String TAG = "NewsChannalDialog";

    public NewsChannalDialog(Context context) {
        this(context,-1);
    }

    public NewsChannalDialog(Context context, int themeResId) {
        super(context, R.style.DialogTheme);
        init();
    }

    private void init() {
        setContentView(R.layout.new_channel_dialog);
        WindowManager.LayoutParams attributes = getWindow().getAttributes();
        attributes.width =WindowManager.LayoutParams.MATCH_PARENT;
        attributes.height =WindowManager.LayoutParams.WRAP_CONTENT;
        attributes.gravity = Gravity.TOP;
        setCanceledOnTouchOutside(true);
        getWindow().setAttributes(attributes);
    }
}

style,这里引用了两个平移动画,很简单

<style name="DialogTheme" >
    <item name="android:windowAnimationStyle">@style/DialogWindowAnimationStyle</item>
</style>
<style name="DialogWindowAnimationStyle" >
    <item name="android:windowEnterAnimation">@anim/dialog_enter</item>
    <item name="android:windowExitAnimation">@anim/dialog_exit</item>
</style>

最后大功告成…

Demo连接(https://github.com/mouxuefei/NewsChannelDialog.git)

villa_mou
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
我的Android进阶之旅------>直接拿来用！最火的Android开源项目
字节卷动
12-07 3565
http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projectshttp://www.csdn.net/article/2013-05-08/2815145-Android-open-source-projects-twohttp://www.csdn.net/article/2013-05-21/2815370
自定义列表选择Dialog.zip
07-10
自定义列表选择Dialog可以联网动态获取内容的自定义列表选择Dialog例子，对话框显示以后会先去联网加载一个列表，本例子适用在网络动态获取信息的需求，需要的朋友可以下载研究一下，编码GBK编译版本2.3.3。  
WCF后续之旅(2): 如何对Channel Layer进行扩展——创建自定义Channel
weixin_33950035的博客
07-09 96
在上一篇文章中，我们通过一个直接借助BasicHttpBinding对象实现Client和Server端进行通信的例子，对WCF channel layer进行了一个大致上的介绍。由此引出了一些列通信相关的概念和对象，比如Channel，Output channel， Input channel，Request channel, Reply Channel，Duplex channel， Chan...
Android自定义频道选择器、频道定制
code小生
08-02 980
code小生,一个专注Android领域的技术平台作者：caochengzhi地址：https://www.jianshu.com/p/53af72e8a4ba声明：本文...
一款频道选择器，可以进行频道的拖动、排序、增删，动态的改变高度，精简而又流畅
未来很长，但我会努力的走下去。
02-19 252
ChannelView 项目地址：chenglove1201/ChannelView  简介：一款频道选择器，可以进行频道的拖动、排序、增删，动态的改变高度，精简而又流畅 更多：作者   提 Bug    标签： 频道,标签- 一款频道选择器，可以进行频道的拖动、排序、增删，动态的改变高度，精简而又流畅 ...
自定义viewgroup 子控件点击没有反应_Android自定义频道选择器、频道定制
weixin_39907762的博客
11-29 434
点击上方蓝字关注??来源： caochengzhihttps://www.jianshu.com/p/53af72e8a4ba前言现在市场上的新闻软件中，绝大多数都会有频道选择器，比如腾讯新闻、网易新闻、今日头条等，频道选择器可以帮助用户定制自己想要的新闻板块，给用户更好的体验。我们的项目正好也是一个新闻类APP，为了更好的符合我们的产品，我们需要自己实现一套频道选择器，如果有需要的...
android自定义pickerview,一个非常好用的Android PickerView库
weixin_42486083的博客
05-25 1429
One very very user-friendly Picker library一个非常好用的Android PickerView库，内部提供2种常用类型的Picker。支持扩展自定义Picker。支持自定义弹窗。支持作为view的非弹窗场景。TimePicker：时间选择器，支持聚合模式(合并v1.x的MixedTimePicker)，支持12小时制(上下午)。OptionPicker：联动...
优秀自定义控件开源项目推荐：让你的app提升一个档次－Android酷炫自定义控件
Java和Android架构
11-25 1608
Github地址链接：优秀自定义控件开源项目推荐 这是我近期整理的比较酷炫并且我们会经常用到的custom view，也有一些不是custom view，但是也是android UI相关的，实现了酷炫UI效果的开源库，合理利用这些开源库，可以让你的app提升一个档次！总结的项目最后维护时间一般不会超过6个月，会持续更新。所以欢迎来我的Github查看，如果觉的不错，欢迎star。其中大部分控
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
Android自定义漂亮Dialog中嵌入自定义时间选择器和日期选择器
04-15
Android自定义漂亮Dialog中嵌入自定义时间选择器和日期选择器,本人亲测)友友们我会更新更多的源码和大家分享，希望大家喜欢 .
Android自定义View之区块选择器
Hubert的博客
05-30 838
最近撸了一个自定义view，还是比较复杂的，感觉有必要分享下实现的过程。 效果 先来看下效果吧： 我们来分析这个view需要实现哪些效果。 + 首先它有一个刻度尺代表了时间段（也可以是别的什么），并且可以看到完整的刻度尺是比屏幕宽度大的，因此肯定需要可以左右滑动。 + 其次，可以有不可选的区域（gif中灰色块）和选中的区域（gif中蓝色块），点击刻度的空白位置出现或者移动选中区域...
Dialog 自定义一些常见效果
未来很长，但我会努力的走下去。
09-18 1095
Dialog 自定义一些常见效果
自定义Dialog实现日期选择器
shaoyu124的博客
03-29 1399
自定义Dialog实现日期选择器 老规矩，先看看实现的效果： 1. 先自定义View写一个WheelView： package com.example.administrator.myapplication; import android.annotation.SuppressLint; import android.content.Context; import androi
padchannel自定义相关资料
jimfang1987的博客
02-02 327
Protobuf基础之proto文件的编译和使用（python，生成pb2.py）： https://sharley.iteye.com/blog/2375059 Numpy库函数大全： https://blog.csdn.net/create115721/article/details/81266009 Caffe源码中caffe.proto文件分析： https://blog.csdn.net...
选择器和Dialog对话框
lizhuang_666的博客
06-05 386
1.选择器selector 1.创建文字颜色改变选择器：selector1.xml 在drawable下面直接生成selector1.xml文件，编写xml文件 2.创建图片改变选择器selector2.xml chat1和chat2图标直接调用系统提供的，步骤如下： 二、Dialog对话框 1.警示对话框 //TODO 1:构建者 AlertDi...
Android 自动搜索频道,Android自定义收音机搜台控件RadioRulerView
weixin_28935113的博客
05-25 986
前言：像这类的自定义控件有非常多的开源项目，但还是没有找到我项目想要的，所以简单实现了一个，下面简单讲讲实现原理。效果图：实现思路：首先画固定背景尺子，而实现这个则要计算刻度线的宽度、刻度线间的距离，以及要确定刻度线的总是，根据这些可以求出第一条刻度线的x坐标，使得整个尺子居中；下图为尺子尺寸的计算方法：贴上关键代码：/*** 画固定的尺子* @param canvas*/private void...
flume 自定义需求 - 组合队列（FileAndMemoryChannel）
fracly的博客
12-01 1157
FLume 自定义Channel使用中遇到的问题（1）本文主要Mark一下在生产环境中使用Flume的自定义Channel时遇到的问题以及解决方案，分享以及好记性不如烂博客 FlumeChannel 简述 自定义Channel使用背景 自定义Channel的原理 自定义Channel会存在的问题 自定义Channel逻辑优化 Flume Channel 简述Flume自身提供Channel有两种，
[原创]WCF后续之旅(2): 如何对Channel Layer进行扩展——创建自定义Channel
威尔软件
07-09 118
在上一篇文章中，我们通过一个直接借助BasicHttpBinding对象实现Client和Server端进行通信的例子，对WCF channel layer进行了一个大致上的介绍。由此引出了一些列通信相关的概念和对象，比如Channel，Output channel， Input channel，Request channel, Reply Channel，Duplex channel， Chan...
自定义Android双日期选择器Dialog
为了创建一个双日期选择器，我们可以自定义一个对话框（Dialog）来同时展示开始日期和结束日期。 首先，我们需要创建一个新的Android项目，并命名为"DoubleDatePicker"。接着，在项目的res/layout目录下创建一个新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值