2. 程式人生 > >Android 轉載---自定義PopWindow 類似於QQ右上角的效果

Android 轉載---自定義PopWindow 類似於QQ右上角的效果

阿新 • • 發佈：2018-12-30

前段時間在個人開發的專案中需要用到彈出選單，類似QQ右上角的彈出選單，自己使用popwin的次數也不是很多，其中也遇到過一點問題，今天正好有時間就把一些經驗分享給大家。 
先來看看最終實現過後的效果怎麼樣，下面放上圖 
這裡寫圖片描述 
自定義的彈出選單是繼承的popwin，並不是view 因為沒有必要重複造車輪，如果想要實現某種特殊的效果另說。首先建立類MyPopWindow繼承Popwindow。

public class MyPopWindow extends PopupWindow implements View.OnClickListener {
    private Context context;
    private
 
 View view;
    private LinearLayout scan;
    private LinearLayout add;
    public MyPopWindow(Context context) {
        this(context, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    public MyPopWindow(Context context, int width, int height) {
        super(context);
        this
 
.context = context;
        setWidth(width);
        setHeight(height);
        setFocusable(true);
        setOutsideTouchable(true);
        setTouchable(true);
        view = LayoutInflater.from(context).inflate(R.layout.layout_mypopwin,null);
        setContentView(view);
        scan = (LinearLayout) view.findViewById(R.id.scan);
        add = (LinearLayout) view.findViewById(R.id.add);
    }

    @Override
 

    public void onClick(View view) {
        switch (view.getId()){
            case R.id.scan:

                break;
            case R.id.add:

                break;
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

下面給出最開始的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="掃一掃"
            android:textSize="16sp"/>
    </LinearLayout>
    <View
        android:layout_width="wrap_content"
        android:layout_height="0.5dp"
        android:background="#cdcdcd"/>
    <LinearLayout
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加好友"
            android:textSize="16sp"/>
    </LinearLayout>
</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

在activity中呼叫自定義彈出選單看看目前的效果 
這裡寫圖片描述 
呼叫的程式碼MyPopWindow win = new MyPopWindow (MainActivity.this, 200,150);指定了彈出選單的寬高，如果不給就會預設給出wrap_content，就會沾滿整個螢幕的寬度。這個樣子還是比較簡陋，現在在佈局檔案中加上.9圖的背景圖，在來看看效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/title_function_bg">
    <LinearLayout
        android:id="@+id/scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="掃一掃"
            android:textSize="16sp"/>
    </LinearLayout>
    <View
        android:layout_width="wrap_content"
        android:layout_height="0.5dp"
        android:background="#cdcdcd"/>
    <LinearLayout
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加好友"
            android:textSize="16sp"/>
    </LinearLayout>
</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

執行後的效果 
這裡寫圖片描述 
美觀了一點，但是背景後面還有背景什麼情況，那麼問題來了，怎麼解決這個問題？那就需要在popwin的構造方法中加入setBackgroundDrawable(new BitmapDrawable())，難看的方形背景就會消失了。 
這裡寫圖片描述 
接近目標效果了，現在的問題是，每次增加一個選單項都要手動的定製寬高很煩人，想讓它自己適應高度、寬度，所以那就得修改佈局檔案了，想想android能夠自由增加item的控制元件不少，首先想到的就是listview。修改佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/title_function_bg">
    <ListView
        android:id="@+id/title_list"
        android:layout_width="120dp"
        android:layout_height="fill_parent"
        android:cacheColorHint="#00000000"
        android:divider="@drawable/popu_line"
        android:padding="3dp"
        android:scrollingCache="false"
        android:listSelector="@drawable/title_list_selector"/>
</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

然後修改自定義的popwindow

public class CustomWin extends PopupWindow {
    private Context context;
    private View view;
    private ListView listView;
    private List<String> list;

    public CustomWin(Context context) {
        this(context, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    public CustomWin(Context context, int with, int height) {
        this.context = context;
        setWidth(with);
        setHeight(height);
        //設定可以獲得焦點
        setFocusable(true);
        //設定彈窗內可點選
        setTouchable(true);
        //設定彈窗外可點選
        setOutsideTouchable(true);
        setBackgroundDrawable(new BitmapDrawable());
        view = LayoutInflater.from(context).inflate(R.layout.popwin_menu,null);
        setContentView(view);
        setAnimationStyle(R.style.popwin_anim_style);
        initData();
    }

    private void initData() {
        listView = (ListView) view.findViewById(R.id.title_list);
        list = new ArrayList<String>();
        list.add("新增好友");
        list.add("掃一掃");
        list.add("支付寶");
        list.add("視訊聊天");
        //設定列表的介面卡
        listView.setAdapter(new BaseAdapter() {
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                TextView textView = null;

                if (convertView == null) {
                    textView = new TextView(context);
                    textView.setTextColor(Color.rgb(255,255,255));
                    textView.setTextSize(14);
                    //設定文字居中
                    textView.setGravity(Gravity.CENTER);
                    //設定文字域的範圍
                    textView.setPadding(0, 13, 0, 13);
                    //設定文字在一行內顯示（不換行）
                    textView.setSingleLine(true);
                } else {
                    textView = (TextView) convertView;
                }
                //設定文字文字
                textView.setText(list.get(position));
                //設定文字與圖示的間隔
//                textView.setCompoundDrawablePadding(0);
//                //設定在文字的左邊放一個圖示
//                textView.setCompoundDrawablesWithIntrinsicBounds(R.mipmap., null, null, null);

                return textView;
            }

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

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

            @Override
            public int getCount() {
                return list.size();
            }
        });
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

最終效果圖

這裡寫圖片描述

補充：

我是使用xml進行item的佈局的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140px"
        android:paddingLeft="10dp"
        >
        <ImageView
            android:id="@+id/diy_pop_image"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/diy_popwindow_sort"
            android:adjustViewBounds="true"
            android:layout_gravity="center_vertical"
            />
        <TextView
            android:id="@+id/diy_pop_text"
            android:layout_width="200dp"
            android:layout_height="30dp"
            android:text="選擇排序方式"
            android:textColor="#111"
            android:textSize="15sp"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:layout_marginLeft="20dp"
            />
    </LinearLayout>

</LinearLayout>

而且在進行使用adapter的時候，需要使用item.xml方式：

//設定列表介面卡
        listview.setAdapter(new BaseAdapter() {
            @Override
            public long getItemId(int position) {
                return position;
            }

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

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

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ImageView image = null;
                TextView text = null;

                if(convertView==null){
                    convertView = LayoutInflater.from(context).inflate(R.layout.diy_popwindow_item,null);
                    image = (ImageView) convertView.findViewById(R.id.diy_pop_image);
                    text = (TextView) convertView.findViewById(R.id.diy_pop_text);
                }
                image.setImageResource(list.get(position).getImageId());
                text.setText(list.get(position).getText());
               return convertView;
            }
        });

相關推薦

Android 轉載---自定義PopWindow 類似於QQ右上角的效果

前段時間在個人開發的專案中需要用到彈出選單，類似QQ右上角的彈出選單，自己使用popwin的次數也不是很多，其中也遇到過一點問題，今天正好有時間就把一些經驗分享給大家。 先來看看最終實現過後的效果怎麼樣，下面放上圖  自定義的彈出選單是繼承的popwin，並不是view 因為

【Android】自定義控制元件-仿QQ聯絡人側滑條目，右側滑選單。

一直沒有寫部落格的習慣，一直都是看別人的部落格，學習別人的東西。平時工作中總會遇到或大或小的問題，往往是上百度CSDN查詢答案。今天嘗試著寫部落格，一是更加深入地熟悉一下部落格；二是轉變一下學習方式；三是把自己所學的東西分享出來，幫助別人的同時也提升了自己！

自定義控制元件：QQ氣泡效果粘性控制元件的實現

學習目的 瞭解幾何圖形工具的用法 掌握畫不規則圖形的方法 應用場景：未讀提醒，效果圖： 繪製一幀的效果 畫一幀粘性控制元件的步驟分析 畫一個固定圓 畫一個拖拽圓 畫中間連線部分 將中間連線部分水平放置，四個角的座標定為固定值，

Android自定義PopWindow（QQ、微信彈出選單）

前段時間在個人開發的專案中需要用到彈出選單，類似QQ右上角的彈出選單，自己使用popwin的次數也不是很多，其中也遇到過一點問題，今天正好有時間就把一些經驗分享給大家。 先來看看最終實現過後的效果怎麼樣，下面放上圖 自定義的彈出選單是繼承的p

Android打造自定義通用popWindow

日常android開發中經常會用到popWindow。因此封裝一個可自定義view,可設定彈出動畫，可設定大小的通用popWindow顯得尤為重要。   效果圖如下： 通用PopWindow分為如下3部分： 1.自定義popWindow 2.popWindow的輔助類

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖： 我們這裡的側

【Android】側滑選單欄功能的實現（類似於QQ）

    通過NavigationView+DrawerLayout來實現側滑選單的功能（效果圖如上），可通過點選左上角圖示以及向右滑動實現側滑選單     首先在主頁佈局xml中使用DreawerLayout作為外包裝，將側滑選單包裝起來即可，而功能則使用navigat

Android ProgressBar 自定義樣式（六），模擬QQ pad版載入（位置居中）

讓ProgressBar居於真個螢幕在正中間： xml佈局檔案如下： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

Android RatingBar 自定義樣式

android style Android RatingBar 自定義樣式1.先定義Style:<style name="RadingStyle" parent="@android:style/Widget.RatingBar"> <!-- 定義星星圖片 -->

Android Gradle 自定義任務執行命令行

andro blog tasks type mman 執行 adl col command tasks.create("name": "testAssemble", "type": Exec) { workingDir "../" commandLin

查看圖片插件--Viewer（類似於qq和微信聊天 的查看圖片）

方法 標簽 ott meet 定義函數 更新 article 調用 show Viewer的github地址：https://github.com/fengyuanchen/viewer 下載該插件（在文件夾dist裏面） 具有參考價值的幾個網站：http://www.d

Android PullToRrefresh 自定義下拉刷新動畫 （listview、scrollview等）

appear ram nal ima cas 創建 protect tom inter PullToRefreshScrollView 自定義下拉刷新動畫，只需改一處。 以下部分轉載自http://blog.csdn.net/superjunjin/article/

自定義 popWindow彈框 工具包

popu second db2 oca pri dial motion void float 　　前言：因為Android 沒有像IOS一樣的ActionSheet，雖然在github上看到有一些類似ActionSheet的庫，總覺得不好用，不如自己寫一個彈框通用類，樣式全

Android studio 自定義打包apk名

roi fault targe test 包名 如果 nts time css Android Studio打包應用默認生成的apk名稱是：app-release.apk 、如果我們要讓生成的apk名跟我們版本包名有聯系的話，那我們就要自定義生成的apk名了 需要在bui

Android Gradle 自定義Task 詳解

png 發布 我們 批處理 使用總結 實用 shift fonts 博客 轉載請標明出處：http://blog.csdn.net/zhaoyanjun6/article/details/76408024 本文出自【趙彥軍的博客】 一：Gradle 是什麽 Gradl

css--畫一個帶有邊框的三角形（類似於QQ的聊天框）

relative png image width css img 技術分享 白色 pos 使用css畫出如下的聊天框： 結構：<div class="chat"></div> css: .chat{ width: 300px;

Android筆記--自定義控件仿遙控器的圓形上下左右OK圓盤按鈕

分享圖片 https click cas tween .com show idc rotate 原文:Android筆記--自定義控件仿遙控器的圓形上下左右OK圓盤按鈕 上

android中自定義的dialog中的EditText無法彈出輸入法解決方案

dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);//彈出輸入法，並且寫在show()方法之後。 解決Dialog 消失，輸入法不消失的問題： 參考：https://blog.csd

【工具篇】Android studio 自定義註釋快速生成

前言 團隊協作中，儘量保證各自程式碼自己維護。這樣既能保證程式碼編寫者在邏輯上的一慣性，也能避免修改不熟悉的程式碼而引起bug問題。但即使是這樣的規避，也依然無法避免程式設計師之間程式碼的混合。所以，針對在一個類中，產出幾個人同時需要添注的程式碼。最好能做程式碼註釋的區分。這樣為長時間後的程式碼

Android UI-自定義日曆控制元件

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！