Android项目实战（十七）：QQ空间实现（二）—— 分享功能 / 弹出PopupWindow-低调大师

Android项目实战（十七）：QQ空间实现（二）—— 分享功能 / 弹出PopupWindow

2018-04-28 570

原文: Android项目实战（十七）：QQ空间实现（二）—— 分享功能 / 弹出PopupWindow

这是一张QQ空间说说详情的截图。

分析：

1、点击右上角三个点的图标，在界面底部弹出一个区域，这个区域有一些按钮提供给我们操作
2、当该区域出现的时候，详情界面便灰了，也说成透明度变化了
3、当任意选了一个按钮或者点击了该区域以外的部分，该区域消失，灰色界面变回亮白色，并执行点击的按钮对应的操作

显然，这个功能我们需要用PopupWindow实现更好~

--------------------------------------------------------------------------------------

下面通过一个Demo来实现这个需求~~

效果图：

首先还是布局文件：

1、主界面：

我们只需要在界面的右上角放一个按钮来弹出PopupWindow ,注意父容器需要有一个id，因为我们需要它来给PopupWindow设置弹出的位置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/mainlayout"
    >

    <ImageButton
        android:id="@+id/btn_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/btn_more"
        android:background="#0000"
        android:layout_alignParentRight="true"
        android:layout_margin="5dp"
        />

</RelativeLayout>

2、PopupWindow界面

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical|center"
        android:background="@drawable/shape_rectangle_white"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/shareto"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:text="分享到"
            android:textSize="15sp"
             />

            <LinearLayout
                android:id="@+id/fp_linear_share"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginBottom="5dp">


                <LinearLayout
                    android:id="@+id/fp_linear_sharetoWeixin"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_horizontal"
                    >
                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:background="@mipmap/ic_launcher"
                        android:layout_gravity="bottom|center_horizontal"/>
                    <TextView
                        android:layout_marginTop="4dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="微信联系人"
                        android:gravity="center"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/fp_linear_sharetoquan"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_horizontal"
                    >
                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:background="@mipmap/ic_launcher"
                        android:layout_gravity="bottom|center_horizontal"/>
                    <TextView
                        android:layout_marginTop="4dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="微信朋友圈"
                        android:gravity="center"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/fp_linear_sharetoQzone"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_horizontal"
                    >
                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:background="@mipmap/ic_launcher"
                        android:layout_gravity="bottom|center_horizontal"/>
                    <TextView
                        android:layout_marginTop="4dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="QQ空间"
                        android:gravity="center"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/fp_linear_sharetoQQ"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_horizontal"
                    >
                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:background="@mipmap/ic_launcher"
                        android:layout_gravity="bottom|center_horizontal"/>
                    <TextView
                        android:layout_marginTop="4dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="QQ好友"
                        android:gravity="center"
                        />
                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_marginTop="20dp"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#e8e8e8" />

        <LinearLayout
            android:id="@+id/fp_other"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="5dp">
            <LinearLayout
                android:id="@+id/fp_report"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                >
                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:background="@mipmap/ic_launcher"
                    android:layout_gravity="bottom|center_horizontal"/>
                <TextView
                    android:layout_marginTop="4dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="举报"
                    android:gravity="center"
                    />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/fp_hide_all"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                >
                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:background="@mipmap/ic_launcher"
                    android:layout_gravity="bottom|center_horizontal"/>
                <TextView
                    android:layout_marginTop="4dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="屏蔽此人"
                    android:gravity="center"
                    />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/fp_hide_pic"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                >
                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:background="@mipmap/ic_launcher"
                    android:layout_gravity="bottom|center_horizontal"/>
                <TextView
                    android:layout_marginTop="4dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="屏蔽此照片"
                    android:gravity="center"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                >
                <ImageView
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="bottom|center_horizontal"/>
                <TextView
                    android:layout_marginTop="4dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    />
            </LinearLayout>

        </LinearLayout>
            <View

                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:background="#e8e8e8" />
            <TextView
                android:id="@+id/fp_cancel"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:gravity="center"        
                android:text="取消"
                android:textSize="17sp" />
    </LinearLayout>
</RelativeLayout>

popupwindow

--------------------------------------------------------------------------------------

java代码部分：

1、首先我们要自定义一个继承PopupWindow的类（根据项目需求决定定义的内容）/**

 * 自定义PopupWindow ， 实现仿QQ空间分享效果
 */
public class SelectPopupWindow extends PopupWindow {

    //一个LinearLayout 表示一个可选操作
    private LinearLayout fp_hide_all,fp_hide_pic,fp_report,fp_linear_sharetoWeixin,fp_linear_sharetoquan,fp_linear_sharetoQzone,fp_linear_sharetoQQ;
    //popupWindow 取消文本按钮
    private TextView fp_cancel;
private View mMenuView;
    public SelectPopupWindow(Activity context, OnClickListener itemsOnClick) {
        super(context);
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mMenuView = inflater.inflate(R.layout.feed_popuwindow, null);

        fp_hide_pic = (LinearLayout) mMenuView.findViewById(R.id.fp_hide_pic);
        fp_hide_all = (LinearLayout) mMenuView.findViewById(R.id.fp_hide_all);
        fp_report = (LinearLayout) mMenuView.findViewById(R.id.fp_report);
        fp_linear_sharetoWeixin = (LinearLayout) mMenuView.findViewById(R.id.fp_linear_sharetoWeixin);
        fp_linear_sharetoquan = (LinearLayout) mMenuView.findViewById(R.id.fp_linear_sharetoquan);
        fp_linear_sharetoQzone = (LinearLayout) mMenuView.findViewById(R.id.fp_linear_sharetoQzone);
        fp_linear_sharetoQQ = (LinearLayout) mMenuView.findViewById(R.id.fp_linear_sharetoQQ);
        fp_cancel = (TextView) mMenuView.findViewById(R.id.fp_cancel);
        //点击取消按钮，关闭popupWindow
        fp_cancel.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
        fp_hide_pic.setOnClickListener(itemsOnClick);
        fp_hide_all.setOnClickListener(itemsOnClick);
        fp_report.setOnClickListener(itemsOnClick);
        fp_linear_sharetoWeixin.setOnClickListener(itemsOnClick);
        fp_linear_sharetoquan.setOnClickListener(itemsOnClick);
        fp_linear_sharetoQzone.setOnClickListener(itemsOnClick);
        fp_linear_sharetoQQ.setOnClickListener(itemsOnClick);

        this.setContentView(mMenuView);
        this.setWidth(LayoutParams.MATCH_PARENT);
        this.setHeight(LayoutParams.WRAP_CONTENT);
        ColorDrawable dw = new ColorDrawable(0x000000);
        this.setBackgroundDrawable(dw);
        this.setFocusable(true);
　　　　
        //点击popupWindow之外的部分  关闭popupWindow
        mMenuView.setOnTouchListener(new OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                int height = mMenuView.findViewById(R.id.fp_linear_share).getTop();
                int y = (int) event.getY();
                if (event.getAction() == MotionEvent.ACTION_UP){
                    if(y<height){
                        dismiss();
                    }
                }                
                return true;
            }
        });
    }
    // 可自主添加其他功能需求方法
}

最后看MainActivity.java

public class MainActivity extends Activity implements View.OnClickListener {
    // 自定义PopupWindow
    private SelectPopupWindow feedSelectPopupWindow;
    // 界面父容器
    private RelativeLayout relativeLayout;
    // 打开popupWindow的按钮
    private ImageButton btn_more;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        relativeLayout = (RelativeLayout) findViewById(R.id.mainlayout);
        btn_more = (ImageButton) findViewById(R.id.btn_more);
        btn_more.setOnClickListener(this);
    }

    // popupWindow 点击事件监听
    private View.OnClickListener selectItemsOnClick = new View.OnClickListener() {
        public void onClick(View v) {
            switch (v.getId()) {
                //根据popupWindow 布局文件中的id 来执行相应的点击事件
                case R.id.fp_linear_sharetoWeixin:
                    Toast.makeText(MainActivity.this,"点击了微信分享",Toast.LENGTH_SHORT).show();
                    break;
                // ....
            }
            //每次点击popupWindow中的任意按钮，记得关闭此popupWindow，
            feedSelectPopupWindow.dismiss();
        }
    };

    /**
     * 设置添加屏幕的背景透明度
     * @param bgAlpha
     */
    public void backgroundAlpha(float bgAlpha)
    {
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.alpha = bgAlpha; //0.0-1.0
        getWindow().setAttributes(lp);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            //点击分享按钮，弹出PopupWindow
            case R.id.btn_more:
                feedSelectPopupWindow = new SelectPopupWindow(this, selectItemsOnClick);
                // 设置popupWindow显示的位置
                // 此时设在界面底部并且水平居中
                feedSelectPopupWindow.showAtLocation(relativeLayout,
                        Gravity.BOTTOM| Gravity.CENTER_HORIZONTAL, 0, 0);
                // 当popupWindow 出现的时候 屏幕的透明度  ，设为0.5 即半透明 灰色效果
                backgroundAlpha(0.5f);
                // 设置popupWindow取消的点击事件，即popupWindow消失后，屏幕的透明度，全透明，就回复原状态
                feedSelectPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        backgroundAlpha(1f);
                    }
                });
                break;
        }
    }
}

注意点：

如果你在你自己的项目中使用了弹出PopupWindow，报错如下：

 Unable to add window -- token null is not valid; is your activity running?

一般是错误在 .showAtLocation()方法上，那么要注意PopupWindow和Dialog一样是需要依赖于Activity存在的

所以不要在onCreate()方法中使用 .showAtLocation()方法，因为这个时候Activity还没有Create()完成

--------------------------------------------------------------------------------------

Android项目实战（十六）：QQ空间实现（一）—— 展示说说中的评论内容并有相应点击事件

原文: Android项目实战（十六）：QQ空间实现（一）—— 展示说说中的评论内容并有相应点击事件大家都玩QQ空间客户端，对于每一个说说，我们都可以评论，那么，对于某一条评论：白雪公主回复小矮人：你们好啊~ 我们来分析一下： 1、QQ空间允许我们点击回复人和被回复人的名字就可以进入对于用户的个人主页（即点击文字“白雪公主”/“小矮人”，就可以进入到这俩用户相应个人主页） 2、点击回复的文字，就可以对回复人进行回复（即点击评论中回复的内容“你们好啊~”，便对弹出一个编辑框对回复人“白雪公主”进行回复） 3、回复人和被回复人的名字是有颜色的效果图：作为一个android开发者，我们要实现对一个TextView ： 1、点击不同的文字部分（文字个数还不确定）有相应的响应操作（进入个人主页等等） 2、一个TextView中某些文字有不同的颜色下面学习如何实现--> ---------------------------------------------------------------------------------- 首先介绍下QQ空间说说列表这...

2018-04-28

514

原文: Android开发实战（十八）：Android Studio 优秀插件：GsonFormat Android Studio 优秀插件系列： Android Studio 优秀插件（一）：GsonFormat Android Studio 优秀插件（二）： Parcelable Code Generator ------------------------------------------------------------------------------------------------------- 这几天没有活，于是乎整理了一些代码，顺便把一些一直在使用的东西也整理下，然后学习新的知识。。 ------------------------------------------------------------------------------------------------------- 作为一个Android程序猿，当你看到后台给你的json数据格式时： { "id":123, "url": "http://img....

2018-04-28

571

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。