android精彩编程案例系列

第1例:仿微信顶部菜单

2018-06-26  本文已影响27人  追梦小乐

核心思想:PopupWindow的使用

效果图如下

仿微信顶部菜单.gif

功能实现过程

1、strings.xml

<resources>
    <string name="app_name">仿微信顶部菜单</string>
    <string name="text_title">微信</string>
    <string name="text_group">发起群聊</string>
    <string name="text_add">添加好友</string>
    <string name="text_sweep">扫一扫</string>
    <string name="text_collect">收付款</string>
    <string name="text_help">帮助与反馈</string>
</resources>

2、menu.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="match_parent"
    android:gravity="right"
    android:clickable="true"
    android:orientation="vertical">
<!--菜单发起群聊按钮-->
    <Button
        android:id="@+id/btn_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_group"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="58dp"
        android:text="@string/text_group"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单添加好友按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_add"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="58dp"
        android:text="@string/text_add"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单扫一扫按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_scan"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="76dp"
        android:text="@string/text_sweep"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单收付款按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_card"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="76dp"
        android:text="@string/text_collect"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单帮助与反馈按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_help"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="40dp"
        android:text="@string/text_help"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />

</LinearLayout>

3、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rlt_root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    tools:context="com.mingrisoft.weimenu.MainActivity">
    <!--微信标题-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_title"
        android:textColor="#FFFFFF"
        android:textSize="25sp"
        />
<!--菜单按钮-->
    <Button
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/btn_menu"
        android:layout_alignParentRight="true"
        android:onClick="OnMenu"
        android:background="@drawable/btn_add"/>


</RelativeLayout>

4、MainActivity.java文件 核心方法实现流程

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    PopupWindow popupWindow;
    private RelativeLayout rltRootView;


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

        rltRootView = (RelativeLayout) findViewById(R.id.rlt_root_view);
    }
    public void OnMenu(View view){
        // 获取自定义的菜单布局文件
        View popupWindow_view = getLayoutInflater().inflate(R.layout.menu, null,false);
        // 创建PopupWindow实例,设置菜单宽度和高度为包裹其自身内容
        popupWindow = new PopupWindow(popupWindow_view, ActionBar.LayoutParams.WRAP_CONTENT,
                ActionBar.LayoutParams.WRAP_CONTENT, true);
        //设置菜单显示在按钮的下面
        popupWindow.showAsDropDown(findViewById(R.id.btn_menu),0,0);

        //点击发起群聊功能
       Button btnChat =  (Button) popupWindow_view.findViewById(R.id.btn_chat);
        btnChat.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d(TAG,"onClick===============");
                //如果菜单存在并且为显示状态,就关闭菜单并初始化菜单
                if (popupWindow != null && popupWindow.isShowing()) {
                    Log.d(TAG,"opopupWindow != null && popupWindow.isShowing()===============");
                    popupWindow.dismiss();
                    popupWindow = null;
                }else {
                    Log.d(TAG,"opopupWindow == null ===============");
                }
            }
        });

        // 点击其他地方消失
        //注意:如果menu布局中,item选项为Button的话,此方法不起作用,应该是跟Button的事件传递有关
        popupWindow_view.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.d(TAG,"onTouch===============");
                //如果菜单存在并且为显示状态,就关闭菜单并初始化菜单
                if (popupWindow != null && popupWindow.isShowing()) {
                    Log.d(TAG,"opopupWindow != null && popupWindow.isShowing()===============");
                    popupWindow.dismiss();
                    popupWindow = null;
                }else {
                    Log.d(TAG,"opopupWindow == null ===============");
                }
                return false;
            }
        });
    }
}
上一篇 下一篇

猜你喜欢

热点阅读