Hiện thực hiệu ứng hoạt ảnh cho PopupWindow trên Android

Để tạo hiệu ứng hoạt ảnh khi hiển thị và ẩn PopupWindow trong ứng dụng Android, bạn có thể làm theo các bước sau:

1. Giao diện chính (activity_main.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_show_popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Hiển thị Popup" />

</RelativeLayout>

2. Layout của PopupWindow (popup_layout.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="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="4"
        android:background="#00bfff" />

</LinearLayout>

3. Triển khai trong MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnShowPopup;
    private View rootView;
    private PopupWindow popup;
    private GridView gridView;

    private final String[] labels = {"Sinh", "Như", "Hạ", "Hoa", "Biển", "Rộng", "Trời", "Xanh"};
    private final int[] icons = {
        R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher,
        R.drawable.ic_launcher, R.drawable.ic_launcher
    };

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

        rootView = findViewById(R.id.main_container);
        btnShowPopup = findViewById(R.id.btn_show_popup);
        btnShowPopup.setOnClickListener(this);

        setupPopup();
    }

    private void setupPopup() {
        View popupContent = LayoutInflater.from(this).inflate(R.layout.popup_layout, null);
        popup = new PopupWindow(popupContent,
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT,
                true);

        popup.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        popup.setOutsideTouchable(true);

        gridView = popupContent.findViewById(R.id.grid_view);
        gridView.setAdapter(createGridAdapter());
    }

    private ListAdapter createGridAdapter() {
        List<Map<String, Object>> dataList = new ArrayList<>();
        for (int i = 0; i < labels.length; i++) {
            Map<String, Object> item = new HashMap<>();
            item.put("text", labels[i]);
            item.put("icon", icons[i]);
            dataList.add(item);
        }

        return new SimpleAdapter(this, dataList,
                R.layout.grid_item,
                new String[]{"text", "icon"},
                new int[]{R.id.text_view, R.id.image_view});
    }

    @Override
    public void onClick(View v) {
        popup.setAnimationStyle(R.style.PopupAnimation);
        popup.showAtLocation(rootView, Gravity.BOTTOM, 0, 0);
    }
}

4. Tạo file hoạt ảnh

popup_enter.xml – Hiệu ứng khi hiện popup:

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

popup_exit.xml – Hiệu ứng khi ẩn popup:

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

5. Định nghĩa style hoạt ảnh trong styles.xml

<style name="PopupAnimation">
    <item name="android:windowEnterAnimation">@anim/popup_enter</item>
    <item name="android:windowExitAnimation">@anim/popup_exit</item>
</style>

Xử lý tương tác với bàn phím ảo

Trường hợp 1: Giữ bàn phím, không thay đổi layout phía dưới

popup.setInputMethodMode(PopupWindow.INPUT_METHOD_NEEDED);
popup.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

Trường hợp 2: Giữ bàn phím, layout phía dưới tự động co lại

popup.setInputMethodMode(PopupWindow.INPUT_METHOD_NEEDED);
popup.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

Trường hợp 3: Tự động ẩn bàn phím khi hiển thị popup

popup.setFocusable(true);

Thẻ: Android PopupWindow animation UI SoftInputMode

Đăng vào ngày 22 tháng 7 lúc 11:49