zoukankan      html  css  js  c++  java
  • 使用PopupWindow和Activity两种不同的方式实现弹窗效果

    分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果。

    一、实现效果图

    这里为了演示方便,我将两种方法放在一个应用程序中演示,这个是主界面

    虽然两种实现的方式不一样,但是最终的效果图都是差不多的

    二、项目结构图

    三、详细的编码实现

    3.1 主界面的实现

    为了演示方便,我这里把两种实现方式分成两个Activity界面放在了主Activity界面中。

    1、主布局资源文件,activity_main.xml:

    双击代码全选
    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
    <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"
           
        <Button
            android:id="@+id/main_btn01"
            android:layout_width="fill_parent"
            android:layout_height="44dp"
            android:layout_above="@+id/main_btn02"
            android:layout_margin="5dp"
            android:background="@drawable/main_btn"
            android:text="第一种实现方式(PopupWindow实现)"
            android:textSize="16dp" /> 
           
        <Button
            android:id="@+id/main_btn02"
            android:layout_width="fill_parent"
            android:layout_height="44dp"
            android:layout_centerVertical="true"
            android:layout_margin="5dp"
            android:background="@drawable/main_btn"
            android:text="第二种实现方式(Activity实现)"
            android:textSize="16dp" /> 
           
    </RelativeLayout>

    2、定义一个自定义按钮的资源文件,main_btn.xml:

    双击代码全选
    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?> 
    <selector xmlns:android="http://schemas.android.com/apk/res/android"
           
        <item android:drawable="@drawable/btn_back_pre" android:state_pressed="true"/> 
        <item android:drawable="@drawable/btn_back_nor"/> 
           
    </selector>

    3、主Activity程序入口类,MainActivity.java:

    双击代码全选
    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
    package com.yangyu.mytitlebar01; 
           
    import android.app.Activity; 
    import android.content.Intent; 
    import android.os.Bundle; 
    import android.view.View; 
    import android.view.View.OnClickListener; 
    import android.widget.Button; 
           
    /**
     * @author yangyu
     *  功能描述:主Activity类,程序的入口类
     */
    public class MainActivity extends Activity implements OnClickListener { 
        //定义按钮 
        private Button mainBtn01,mainBtn02; 
               
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.activity_main); 
                                   
            initView();      
        
           
        /**
         * 初始化组件
         */
        private void initView(){ 
            //得到按钮并设置监听事件 
            mainBtn01 = (Button)findViewById(R.id.main_btn01); 
            mainBtn02 = (Button)findViewById(R.id.main_btn02);       
                   
            mainBtn01.setOnClickListener(this); 
            mainBtn02.setOnClickListener(this); 
        }    
                   
        @Override
        public void onClick(View v) { 
            switch (v.getId()) { 
            case R.id.main_btn01: 
                startActivity(new Intent(MainActivity.this,CustomTitleActivity01.class)); 
                break
            case R.id.main_btn02: 
                startActivity(new Intent(MainActivity.this,CustomTitleActivity02.class)); 
                break;               
            default
                break
            }        
        
               
    }

    3.2 第一种实现方式(PopupWindow)

    第一种实现方式主要是通过点击按钮来弹出一个PopupWindow菜单来实现的,步骤如下:

    1、标题栏的布局资源文件,这个资源文件在第二种实现方式中也会使用到,activity_main.xml:

    双击代码全选
    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:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#fcfcfc"
        android:orientation="vertical"
           
        <RelativeLayout
            android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="@drawable/title_bar"
            android:gravity="center_vertical"
           
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="微信"
                android:textColor="#ffffff"
                android:textSize="20sp" /> 
           
            <ImageButton
                android:id="@+id/title_btn"
                android:layout_width="67dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:background="@drawable/title_button"
                android:onClick="btnmainright"
                android:src="@drawable/title_btn_function" /> 
        </RelativeLayout
           
    </LinearLayout>

    2、弹窗的布局页面,这里定义了一个ListView,title_popup.xml:

  • 相关阅读:
    [再寄小读者之数学篇](2014-06-14 自然数集到自身的两个不可交换的双射)
    [再寄小读者之数学篇](2014-06-14 [四川师范大学 2014 年数学分析考研试题] 积分不等式)
    [家里蹲大学数学杂志]第294期微分方程与数学物理问题习题集
    这几天回家了
    SCI,EI,ISTP
    [家里蹲大学数学杂志]第049期2011年广州偏微分方程暑期班试题---随机PDE-可压NS-几何
    [家里蹲大学数学杂志]第048期普林斯顿高等研究所的疯子们
    [家里蹲大学数学杂志]第047期18 世纪法国数学界的3L
    [家里蹲大学数学杂志]第293期_偏微分方程基础教程
    [再寄小读者之数学篇](2014-06-03 华罗庚等式)
  • 原文地址:https://www.cnblogs.com/lechance/p/4373383.html
Copyright © 2011-2022 走看看