Android使用popwindow高仿IOS底部彈框

   我們使用蘋果手機的時候會發現IOS中有底部彈框效果,重底部向上彈出效果,下面是通過PopWindow來實現仿IOS彈框:

效果圖:



項目工程目錄:



1、首頁佈局就一個按鈕

<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" >

    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="點擊提示" />

</RelativeLayout>


2、設置popwindow要彈出的佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/dialog_ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:background="#33000000"
        android:gravity="bottom"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/popup_window_bg"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="選擇圖片"
                android:textColor="#838383" />

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

            <TextView
                android:id="@+id/tv_photo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:gravity="center"
                android:onClick="click"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="相冊"
                android:textColor="#3AC0FA"
                android:textSize="17sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#ececec" />

            <TextView
                android:id="@+id/tv_photograph"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:gravity="center"
                android:onClick="click"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="拍照"
                android:textColor="#3AC0FA"
                android:textSize="17sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/popup_window_bg" >

            <TextView
                android:id="@+id/tv_cancle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:gravity="center"
                android:onClick="click"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="取消"
                android:textColor="#3AC0FA"
                android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>


3、在res文件夾下創建drawable文件夾,在drawable中創建xml文件 popup_window_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- 背景色 -->
    <solid android:color="#FFFFFF" />

    <!-- 圓角 -->
    <corners
        android:bottomLeftRadius="6dp"
        android:bottomRightRadius="6dp"
        android:topLeftRadius="6dp"
        android:topRightRadius="6dp" />

</shape>

4、在res文件夾下創建 anim文件夾,用來彈出動畫調用,在anim文件夾下創建xml文件hide_to_bottom.xml和show_from_bottom.xml

hide_to_bottom.xml代碼:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="100%p"/>

    <alpha
        android:duration="200"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

show_from_bottom.xml代碼:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="200"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>

    <alpha
        android:duration="200"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

5、在values裏的styles.xml文件里加入代碼:

 就是剛剛創建的2個動畫文件

    <style name="popupwindow_anim_style">

        <!-- 指定顯示的動畫xml -->
        <item name="android:windowEnterAnimation">@anim/show_from_bottom</item>
        <!-- 指定消失的動畫xml -->
        <item name="android:windowExitAnimation">@anim/hide_to_bottom</item>
    </style>


6、下面就是最後一步MainActivity中使用popwindow:

private	PopupWindow pw;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Button bt=(Button) findViewById(R.id.button);
		bt.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {

				showEditPhotoWindow(v);

			}
		});

	}

	private void showEditPhotoWindow(View view) {
		View contentView=getLayoutInflater().inflate(R.layout.popup_window_title_image, null);
		pw=new PopupWindow(contentView, getWindowManager().getDefaultDisplay().getWidth(), getWindowManager().getDefaultDisplay().getHeight(), true);
		//設置popupwindow彈出動畫
		pw.setAnimationStyle(R.style.popupwindow_anim_style);
		//設置popupwindow背景
		pw.setBackgroundDrawable(new ColorDrawable());
		pw.showAtLocation(getWindow().getDecorView(), Gravity.CENTER,0,0);

		//處理popupwindow
		popupwindowselectphoto(contentView);
	}
	//初始化控件和控件的點擊事件
	private void popupwindowselectphoto(View contentView) {
		TextView tv_select_pic=(TextView) contentView.findViewById(R.id.tv_photo);
		TextView tv_pai_pic=(TextView) contentView.findViewById(R.id.tv_photograph);
		TextView tv_cancl=(TextView) contentView.findViewById(R.id.tv_cancle);
		LinearLayout layout=(LinearLayout) contentView.findViewById(R.id.dialog_ll);
		tv_select_pic.setOnClickListener(pop);
		tv_pai_pic.setOnClickListener(pop);
		tv_cancl.setOnClickListener(pop);
		layout.setOnClickListener(pop);


	}
	private OnClickListener pop=new OnClickListener() {

		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.tv_photo:
				Toast.makeText(MainActivity.this, "相冊 ", Toast.LENGTH_SHORT).show();
				break;
			case R.id.tv_photograph:
				Toast.makeText(MainActivity.this, "拍照 ", Toast.LENGTH_SHORT).show();
				break;

			case R.id.tv_cancle:
				if(pw!=null){
					pw.dismiss();
				}
				break;
				//點擊提示框以外的地方關閉
			case R.id.dialog_ll:
				if(pw!=null){
					pw.dismiss();
				}
				break;


			}

		}



	};

源碼下載地址:Demo下載




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章