Android自定義PopWindow實現(xiàn)QQ、微信彈出菜單效果
前段時間在個人開發(fā)的項目中需要用到彈出菜單,類似QQ右上角的彈出菜單,自己使用popwin的次數(shù)也不是很多,其中也遇到過一點問題,今天正好有時間就把一些經(jīng)驗分享給大家。
先來看看最終實現(xiàn)過后的效果怎么樣,下面放上圖
自定義的彈出菜單是繼承的popwin,并不是view 因為沒有必要重復造車輪,如果想要實現(xiàn)某種特殊的效果另說。首先創(chuàng)建類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; } } }
下面給出最開始的布局文件
<?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>
在activity中調(diào)用自定義彈出菜單看看目前的效果
調(diào)用的代碼MyPopWindow win = new MyPopWindow (MainActivity.this, 200,150);指定了彈出菜單的寬高,如果不給就會默認給出wrap_content,就會沾滿整個屏幕的寬度。這個樣子還是比較簡陋,現(xiàn)在在布局文件中加上.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>
運行后的效果
美觀了一點,但是背景后面還有背景什么情況,那么問題來了,怎么解決這個問題?那就需要在popwin的構造方法中加入setBackgroundDrawable(new BitmapDrawable()),難看的方形背景就會消失了。
接近目標效果了,現(xiàn)在的問題是,每次增加一個菜單項都要手動的定制寬高很煩人,想讓它自己適應高度、寬度,所以那就得修改布局文件了,想想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>
然后修改自定義的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); //設置彈窗內(nèi)可點擊 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); //設置文本在一行內(nèi)顯示(不換行) 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(); } }); } }
最終效果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
flutter PageView實現(xiàn)左右滑動切換視圖
這篇文章主要為大家詳細介紹了flutter PageView實現(xiàn)左右滑動切換視圖,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07Android編程實現(xiàn)將ButtonBar放在屏幕底部的方法
這篇文章主要介紹了Android編程實現(xiàn)將ButtonBar放在屏幕底部的方法,涉及Android界面設計與文本操作相關技巧,需要的朋友可以參考下2017-03-03Android 中通過ViewDragHelper實現(xiàn)ListView的Item的側拉劃出效果
這篇文章主要介紹了 Android 中通過ViewDragHelper實現(xiàn)ListView的Item的側拉劃出效果,需要的朋友可以參考下2017-08-08Android2.3實現(xiàn)SD卡與U盤自動掛載的方法
這篇文章主要介紹了Android2.3實現(xiàn)SD卡與U盤自動掛載的方法,較為詳細的分析了Android2.3實現(xiàn)SD卡與U盤自動掛載的具體步驟與相關技巧,需要的朋友可以參考下2016-02-02