Android进阶之绘制-自定义View完全掌握(三)

自定义View系列的第三篇博客，我们来学习如何实现自定义下拉框。
今天的程序，我们来实现这样的一个效果。

布局非常简单，我们直接开始编码。
修改activity_main.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.itcast.test0430.MainActivity">

    <EditText
        android:id="@+id/et_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="middle"
        android:hint="请输入内容..."
        android:paddingRight="40dp"
        android:singleLine="true" />

    <ImageView
        android:id="@+id/iv_down_arrow"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignRight="@id/et_input"
        android:layout_alignTop="@id/et_input"
        android:padding="5dp"
        android:src="@drawable/down_arrow" />
</RelativeLayout>

布局代码非常简单，就是两个控件。
接下来修改MainActivity的代码。

package com.itcast.test0430;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.et_input)
    EditText etInput;
    @BindView(R.id.iv_down_arrow)
    ImageView ivDownArrow;

    /**
     *
     */
    private PopupWindow popupWindow;
    private ListView listView;

    private ArrayList<String> msgs;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        listView = new ListView(this);
        listView.setBackgroundColor(Color.WHITE);
        //准备数据
        msgs = new ArrayList<>();
        for(int i = 0;i < 500;i++) {
            msgs.add(i + "--aaaaaa---" + i);
        }
        adapter = new MyAdapter();
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //1、得到数据
                String msg = msgs.get(position);
                //2、设置到输入框
                etInput.setText(msg);

                if(popupWindow != null && popupWindow.isShowing()){
                    popupWindow.dismiss();
                    popupWindow = null;
                }
            }
        });
    }

    @OnClick(R.id.et_input)
    public void onViewClick(View view){
        if(popupWindow == null){
            popupWindow = new PopupWindow(this);
            popupWindow.setWidth(etInput.getWidth());
            popupWindow.setHeight(400);

            popupWindow.setContentView(listView);
            popupWindow.setFocusable(true);//设置焦点
        }

        popupWindow.showAsDropDown(etInput,0,0);
    }

    class MyAdapter extends BaseAdapter{

        @Override
        public int getCount() {
            return msgs.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if(convertView == null){
                convertView = View.inflate(MainActivity.this,R.layout.item_main,null);
                viewHolder = new ViewHolder();
                viewHolder.tv_msg = convertView.findViewById(R.id.tv_msg);
                viewHolder.iv_delete = convertView.findViewById(R.id.iv_delete);
                convertView.setTag(viewHolder);
            }else{
                viewHolder = (ViewHolder) convertView.getTag();
            }
            //根据位置得到数据
            final String msg = msgs.get(position);
            viewHolder.tv_msg.setText(msg);

            //设置删除
            viewHolder.iv_delete.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //1、从集合删除
                    msgs.remove(msg);
                    //2、刷新UI---也就是 刷新适配器
                    adapter.notifyDataSetChanged();
                }
            });
            return convertView;
        }
    }
    static class ViewHolder{
        TextView tv_msg;
        ImageView iv_delete;
    }
}

item_main.xml文件的代码如下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="5dp">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:padding="3dp"
        android:src="@drawable/user" />

    <TextView
        android:id="@+id/tv_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="3dp"
        android:text="三个火枪手"
        android:textColor="#000" />

    <ImageView
        android:id="@+id/iv_delete"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:padding="3dp"
        android:src="@drawable/delete" />
</LinearLayout>

这里的代码也很简单，所以不作过多解释，代码的每个地方都有注释。唯一需要注意的地方就是，因为我们的PopupWindow类是设置了宽为200，而只要是在代码中设置的控件属性，它的单位均为px(像素)，而像素是没有适配功能的，所以为了使我们的程序能够在任意分辨率的手机上正确运行，我们应该把像素转换为dp。
提供给大家一个工具类，用于dp与px之间的转换。

package com.itcast.test0430;

import android.content.Context;

public class DensityUtil {
    /**
     * 根据手机的分辨率从dip的单位转换为px(像素)
     */
    public static int dipToPx(Context context,float dpValue){
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从px(像素)的单位转换为dip
     */
    public static int pxToDip(Context context,float pxValue){
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue * scale + 0.5f);
    }
}

所以，我们把popupWindow.setHeight(400);改为

int height = DensityUtil.dipToPx(this,400);
popupWindow.setHeight(height);

即可。
现在运行项目，预览一下效果。

这样，我们的下拉框也就实现了。现在有了dp和px之间转换的工具类，我们就可以在需要屏幕适配的地方使用它了，包括我们之前练习的一些项目。

源码已上传至GitHub

原文地址：https://www.cnblogs.com/blizzawang/p/11411762.html

时间： 2024-10-08 09:34:22

Android进阶之绘制-自定义View完全掌握(三)的相关文章

Android进阶之绘制-自定义View完全掌握(二)

这是自定义View系列的第二篇博客,我们继续来学习关于自定义View的知识. 今天我们来实现一下广告条案例. 我们要实现的是这样的一个效果. 要想实现这样的效果,我们可以借助ViewPager控件,然后加上自定义的一些控件即可完成.那么现在就开始吧. 新建一个android项目. 修改activity_main.xml文件. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a

Android进阶之绘制-自定义View完全掌握(四)

前面的案例中我们都是使用系统的一些控件通过组合的方式来生成我们自定义的控件,自定义控件的实现还可以通过自定义类继承View来完成.从该篇博客开始,我们通过自定义类继承View来实现一些我们自定义的控件. 我们通过一个案例来学习,现在来实现这样一个效果. 我们新建一个类MyToggleButton,让它继承View. 注意,一定要重写带两个参数的构造方法,因为如果我们在布局文件使用该类,将会用这个构造方法实例该类,如果没有就崩溃. 介绍一下一个控件从创建到显示过程中的主要方法. 执行构造方法实例化

Android进阶之绘制-自定义View完全掌握(一)

Android的UI设计可以说是决定一个app质量的关键因素,因为人们在使用app的时候,最先映入眼帘的就是app的界面了,一个美观.充实的界面能够给用户带来非常好的体验,会在用户心中留下好的印象. 对于UI设计,Android原生的控件加上一些开源库的使用,已经能够满足大部分的UI需求,但是,某些比较新颖.花哨的控件效果,我们只能通过自定义View来实现,那么,从该篇博客开始,我将记录关于Android自定义View的学习内容,并将其整理呈现给大家. 我们来实现一个优酷菜单案例,在案例中会涉及

Android进阶之绘制-自定义View完全掌握(五)

在自定义类继承View实现自定义控件的过程中,我们还应该对一些自定义属性有所了解. 我们通过一个案例来学习一下. 新建一个android项目,然后我们创建一个类MyAttributeView继承View. 贴出MyAttributeView的代码. package com.itcast.test0501; import android.content.Context; import android.support.annotation.Nullable; import android.util.

Android 如何 画 柱状图 -------自定义View

实现了 柱状图 根据 SeekBar的滑动 改变的效果: 图示效果: 自定义View的代码: package com.example.coustomviewdemo; import android.R.color; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.g

Android属性动画与自定义View——实现vivo x6更新系统的动画效果

晚上好,现在是凌晨两点半,然后我还在写代码.电脑里播放着<凌晨两点半>,晚上写代码,脑子更清醒,思路更清晰. 今天聊聊属性动画和自定义View搭配使用,前面都讲到自定义View和属性动画,但是一起用的还是不多,刚巧今晚手机提示我更新系统,我看到那个更新的动画还不错,仔细的分析了一下,于是我也决定写一个,不是一模一样的,但是效果和原理是一样的. 先看看图: 这是一张静态的图,这里有三个波浪线,当下载完之后,波浪线会往上活动,一直到消失. 所以难点也是在这个波浪线上.这个波浪线类似于一个水波纹,也

Android知识梳理之自定义View

虽然android本身给我们提供了形形色色的控件,基本能够满足日常开发的需求,但是面对日益同质化的app界面,和不同的业务需求.我们可能就需要自定义一些View来获得比较好的效果.自定义View是android开发者走向高级开发工程师必须要走的一关. 转载请标明出处:http://blog.csdn.net/unreliable_narrator/article/details/51274264 一,构造函数: 当我们创建一个类去继承View的时候,会要求我们至少去实现一个构造函数. publi

Android ——利用OnDraw实现自定义View（转）

自定义View的实现方式大概可以分为三种,自绘控件.组合控件.以及继承控件.本文将介绍自绘控件的用法.自绘控件的意思是,这个控件上的内容是用onDraw函数绘制出来的.关于onDraw函数的介绍可参看 Android视图绘制流程完全解析,带你一步步深入了解View(二) . 例子1:在layout文件中使用自绘控件 出处:http://blog.csdn.net/guolin_blog/article/details/17357967 下面我们准备来自定义一个计数器View,这个View可以响应

【Android 应用开发】 自定义 View 组件 -- 圆形进度条

转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://download.csdn.net/detail/han1202012/8069497 ; -- GitHub 地址 : https://github.com/han1202012/CircleProcess.git ; -- 工程示例 : 一. 相关知识点解析 1. 自定义 View 组件构造方法 构造方