PopupWindow实战案例：实现页面顶部日期选择效果（指定范围筛选）

效果图

本案例实现的是和上图的日期选择一样的效果，弹出的PopupWindow使用的是GitHub上的一个开源工具：EasyPopup

开始实现

1，添加依赖

compile 'com.github.zyyoona7:EasyPopup:1.1.2'

2，布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".activity.TestActivity">

    <include layout="@layout/toolbar"></include>

    <LinearLayout
        android:id="@+id/timeSelect"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:background="#eeeeee"
        android:orientation="horizontal"
        android:visibility="visible">

        <TextView
            android:id="@+id/upDay"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="上一天"
            android:textColor="@color/black_9"
            android:textSize="14sp" />

        <LinearLayout
            android:id="@+id/timeShow"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="5dp"
                android:gravity="center"
                android:text="2019-02-22"
                android:textColor="@color/black_6"
                android:textSize="14sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:background="@color/transparent"
                android:src="@drawable/arrow_down" />
        </LinearLayout>


        <TextView
            android:id="@+id/nextDay"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="下一天"
            android:textColor="@color/black_9"
            android:textSize="14sp" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/bottomContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>

</LinearLayout>

3，对应的Activity代码如下：

public class TestActivity extends BaseActivity implements View.OnClickListener {

    @BindView(R.id.tvTitle)
    TextView tvTitle;
    @BindView(R.id.ivBack)
    ImageView ivBack;

    @BindView(R.id.timeSelect)
    LinearLayout timeSelect;
    @BindView(R.id.upDay)
    TextView upDay;
    @BindView(R.id.nextDay)
    TextView nextDay;
    @BindView(R.id.time)
    TextView time;
    @BindView(R.id.timeShow)
    LinearLayout timeShow;
    @BindView(R.id.bottomContent)
    LinearLayout bottomContent;

    private EasyPopup mCirclePop; // 日期选择
    private Calendar calendar;
    private List<DateSelect> list = new ArrayList<>();
    private TeamSCTimeSelectAdapter adapter;
    private int currentSelect = 5;

    @Override
    public int setLayout() {
        return R.layout.activity_test;
    }

    @Override
    public void initView() {
        tvTitle.setText("PopupWindow实现日期选择");
        time.setText(DateUtils.getDate());
        initDateSelectPopup();
        upDay.setOnClickListener(this);
        nextDay.setOnClickListener(this);
        timeShow.setOnClickListener(this);
    }

    private void initDateSelectPopup() {
        mCirclePop = EasyPopup.create()
                // 设置弹出的popupwindow的宽高，注意：R.layout.team_sc_time布局里面设置跟布局宽为match是没用的，必须此处代码设置
                .setContentView(TestActivity.this, R.layout.team_sc_time, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
                // 设置动画效果
//                .setAnimationStyle(R.style.RightPopAnim)
                //是否允许点击PopupWindow之外的地方消失
                .setFocusAndOutsideEnable(true)
                //允许背景变暗
                .setBackgroundDimEnable(true)
                //变暗的透明度(0-1)，0为完全透明
                .setDimValue(0.4f)
                //变暗的背景颜色
                .setDimColor(Color.GRAY)
                //指定任意 ViewGroup 背景变暗,此处为日期选择控件下边的布局区域
                .setDimView(bottomContent)
                .apply();
        final GridView gridView = mCirclePop.findViewById(R.id.gvShow);
        calendar = Calendar.getInstance();
        calendar.add(Calendar.DATE, -5);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime())));
        calendar.add(Calendar.DATE, 1);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime())));
        calendar.add(Calendar.DATE, 1);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime())));
        calendar.add(Calendar.DATE, 1);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime())));
        calendar.add(Calendar.DATE, 1);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime())));
        calendar.add(Calendar.DATE, 1);
        list.add(new DateSelect(DateUtils.getDateFormat(calendar.getTime()), true)); // 当前日期
        adapter = new TeamSCTimeSelectAdapter(TestActivity.this, list);
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                mCirclePop.dismiss();
                boolean checked = list.get(position).isChecked();
                if (!checked) {
                    // 此处只处理未选中的情况，选中时再次选中无效果,position和currentSelect肯定值不一样
                    list.get(currentSelect).setChecked(false);
                    list.get(position).setChecked(true);
                    currentSelect = position;
                    time.setText(list.get(position).getDate());
                    // 更新适配器
                    adapter.notifyDataSetChanged();
                }
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.upDay:
                if (currentSelect >= 1) {
                    list.get(currentSelect).setChecked(false);
                    currentSelect -= 1;
                    list.get(currentSelect).setChecked(true);
                    time.setText(list.get(currentSelect).getDate());
                    // 更新适配器 -- 局部更新
                    adapter.notifyDataSetChanged();
                } else {
                    ToastUtils.toastWarn("暂无上一天数据", false);
                }

                break;
            case R.id.timeShow:
                // 设置popupwindow显示在时间选择区域的正下方
                mCirclePop.showAtAnchorView(timeSelect, YGravity.BELOW, XGravity.CENTER, 0, 0);
                break;
            case R.id.nextDay:
                if (currentSelect <= list.size() - 2) {
                    list.get(currentSelect).setChecked(false);
                    currentSelect += 1;
                    list.get(currentSelect).setChecked(true);
                    time.setText(list.get(currentSelect).getDate());
                    // 更新适配器 -- 局部更新
                    adapter.notifyDataSetChanged();
                } else {
                    ToastUtils.toastWarn("暂无下一天数据", false);
                }
                break;
        }
    }
}

4，DateSelect代码如下：

public class DateSelect {

    private String date;
    private boolean isChecked;

    public DateSelect() {
    }

    public DateSelect(String date) {
        this.date = date;
    }

    public DateSelect(String date, boolean isChecked) {
        this.date = date;
        this.isChecked = isChecked;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public boolean isChecked() {
        return isChecked;
    }

    public void setChecked(boolean checked) {
        isChecked = checked;
    }
}

5，R.layout.team_sc_time代码如下：

<?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="wrap_content"
    android:background="@color/white"
    android:orientation="vertical">

    <GridView
        android:id="@+id/gvShow"
        android:numColumns="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:verticalSpacing="10dp"
        >
    </GridView>

</LinearLayout>

6，TeamSCTimeSelectAdapter适配器代码：

public class TeamSCTimeSelectAdapter extends BaseAdapter {

    private final Activity mActivity;
    private final List<DateSelect> list;
    private ViewHolder holder;

    public TeamSCTimeSelectAdapter(Activity mActivity, List<DateSelect> mList) {

        this.mActivity = mActivity;
        this.list = mList;

    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = View.inflate(mActivity, R.layout.team_sc_timeselect_gridview, null);
            holder = new ViewHolder(convertView);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        DateSelect dateSelect = list.get(position);

        // 设置值
        holder.tab.setText(dateSelect.getDate());
        // 设置颜色
        if (dateSelect.isChecked()) {
            // 如果是选中
            holder.tab.setTextColor(mActivity.getResources().getColor(R.color.title_light));
            holder.tab.getDelegate().setStrokeColor(mActivity.getResources().getColor(R.color.title_light));
        }else{
            // 如果是未选中
            holder.tab.setTextColor(mActivity.getResources().getColor(R.color.black_6));
            holder.tab.getDelegate().setStrokeColor(mActivity.getResources().getColor(R.color.list_line));
        }

        return convertView;
    }

    static class ViewHolder {

        @BindView(R.id.tab)
        RoundTextView tab;

        public ViewHolder(View view) {
            ButterKnife.bind(this, view);
        }
    }
}

7，R.layout.team_sc_timeselect_gridview代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <com.flyco.roundview.RoundTextView
        android:id="@+id/tab"
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        app:rv_strokeColor="@drawable/item_text_choice_selector"
        app:rv_strokeWidth="1dp"
        app:rv_cornerRadius="2dp"
        android:textColor="@drawable/item_text_choice_selector"
        android:textSize="13sp"
        android:text="2019-02-25"
        android:gravity="center_horizontal"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        />

</LinearLayout>