Hướng dẫn sử dụng floating app

6/12/16

Với tính năng tương tự Float Tube Video ở bài viết trước, hôm nay TECHRUM tiếp tục giới thiệu ứng dụng Floating Apps Multitask, cho phép bạn thực hiện nhiều công việc cùng một lúc theo dạng cửa sổ pop-up, dành cho các thiết bị Android. Về cơ bản, cách hoạt động của Floating Apps Multitask khá giống với Float Tube Video, đều đem đến cho người dùng khả năng thực hiện song song nhiều ứng dụng hoặc thao tác cùng một lúc mà không cần chuyển đổi qua lại nhiều lần. Floating Apps Multitask tạo ra các cửa sổ ứng dụng nhỏ dạng pop-up, giúp cho quá trình sử dụng thiết bị trở nên đa nhiệm hơn, thật tuyệt khi chúng ta có thể làm cùng lúc nhiều công việc khác nhau phải không các bạn. Tuy nhiên, vẫn có một chút lưu ý "nho nhỏ" dành cho các bạn là với các thiết bị cấu hình thấp, RAM từ 1GB trở xuống thì không nên lạm dụng Floating Apps Multitask để mở quá nhiều apps cùng một lúc, rất dễ gây ra tình trạng đơ, lag và sập nguồn.

Video giới thiệu Floating Apps Multitask​


Để trải nghiệm Floating Apps Multitask tốt hơn, các bạn có thể xem qua bài hướng dẫn nhanh phía dưới nhé:

Bước 1: Tải về Floating Apps Multitask cho thiết bị Android.


Bước 2: Tiến hành cài đặt và tùy chọn thiết lập cá nhân. Ở phần giao diện chính, Floating Apps Multitask sẽ cung cấp cho chúng ta ba chuyên mục riêng là ứng dụng, ứng dụng của tôi và cài đặt mở rộng.

Tuy nhiên, phần bạn cần chú ý chính ở đây là mục Ứng dụng với toàn bộ ứng dụng được hỗ trợ như Facebook, Youtube, Video, Google+, Máy tính, Đèn pin v.v...


Bước 3: Để mở nhiều ứng dụng khác nhau, bạn chọn biểu tượng có chín ô vuông nhỏ [theo hình minh họa phía dưới] > chọn ứng dụng tùy ý.


Bước 4: Floating Apps Free sẽ tạo ra các khung cửa sổ cho mỗi ứng dụng riêng biệt. Bây giờ bạn có thể thoải mái xem video, lướt facebook, đọc báo hoặc làm bất cứ điều.

Ngoài ra, bạn cũng có thể thay đổi kích thước của khung pop-up bằng cách giữ biểu tượng ba gạch chéo góc dưới bên phải của cửa sổ > di chuyển kích thước mong muốn.


@Hải Hài Hước / TECHRUM.VN​

Last edited by a moderator: 6/12/16

7/12/16

Sau khi tải về thì mình thấy ứng dụng điều chỉnh màn hình có phần hơi khó khăn. Nhưng đồng thời cũng thấy và dùng thử một ứng dụng khác mang tên Mr. Float, hình người đeo kính, mình thấy ứng dụng này sử dụng khá tiện, có thể ấn vào icon ứng dụng để mở thêm các ứng dụng đa nhiệm con, đồng thời kéo một ứng dụng về một góc trên hoặc dưới sẽ chạy nửa màn hình trên [hoặc dưới], kéo sang trái [phải] sẽ chia chạy ở một nửa màn hình trái [phải], y như trên window vậy.

Floating widgets là view trôi trên màn hình. Nó rất thuận tiện cho việc thao tác đa nhiệm, 1 người có thể làm việc trên các ứng dụng khác nhau và kiểm soát chúng cùng 1 lúc. Điều đó có nghĩa là nếu bạn đang ở trong các ứng dụng tính toán và 1 widget từ máy nghe nhạc đang nổi trên màn hình, bạn có thể kiểm soát nhạc của bạn cùng một lúc

Trong hướng dẫn này, chúng ta sẽ tìm hiểu làm thế nào để tạo widget nổi đơn giản và cho phép người sử dụng để kéo chúng trên màn hình. Người dùng có thể điều chỉnh vị trí của widget trôi nổi trên màn hình. Chúng ta sẽ phát triển một floating nổi đó là có nút để điều khiển âm nhạc.

Xem trước kết quả

Hệ thống Android cho phép các ứng dụng vẽ trên ứng dụng khác nếu ứng dụng có quyền android.permission.SYSTEM_ALERT_WINDOW. Chúng tôi sẽ sử dụng các dịch vụ nền để thêm các widget nổi vào hệ thống phân cấp điểm của màn hình hiện tại. Vì vậy, floating view luôn luôn trên cùng của cửa sổ ứng dụng.

Để kéo thả lên trên màn hình chúng ta sẽ override OnTouchListener [] để lắng nghe sự kiện kéo thả và sự thay đổi vị trí của các điểm có trong màn hình.

Bước 1. Tạo mới ứng dụng trong Android Studio: File ⇒ New Project

Bước 2. Download resource và thêm chúng vào thư mục của project. Thư mục này có chứa nhưng icon, ảnh cần thiết cho ứng dụng demo này

Bước 3. Thêm quyền android.permission.SYSTEM_ALERT_WINDOW permission vào file AndroidManifest.xml file. Quyền này cho phép một ứng dụng có thể tạo cửa sổ, hiển thị nó lên trên top của tất cả các ứng dụng khác. Và chúng ta cũng sẽ thêm tên của dịch vụ FloatingViewService

AndroidManifest.xml

Bước 4. Tạo 1 layout với tên: layout_floating_widget.xml cho floating view. Layout này sẽ bao gồm 2 phần chính:

Collapsed view: floating widget sẽ co lại khi view được launched. Khi người dùng click vào view này này, nó sẽ đượcc mở rộng ra.

Expanded View: view này sẽ chứa các nút để chơi nhạc, thay đổi bài hát: next / previous và mở ứng dụng.

layout_floating_widget.xml

2.1. Thêm Floating Widget [Music Controls] and xử ký kéo thả

Bây giờ tạo ra một dịch vụ có tên là FloatingViewService.java. Bất cứ khi nào bạn muốn hiển thị floating view, bắt đầu sử dụng dịch vụ bằng lệnh startService []. Trong onCreate [] của dịch vụ, chúng ta sẽ bổ sung thêm lauout của floating view ở góc trên bên trái của cửa sổ.

FloatingViewService.java public class FloatingViewService extends Service { private WindowManager mWindowManager; private View mFloatingView; public FloatingViewService[] { } @Override public IBinder onBind[Intent intent] { return null; } @Override public void onCreate[] { super.onCreate[]; //Inflate the floating view layout we created mFloatingView = LayoutInflater.from[this].inflate[R.layout.layout_floating_widget, null]; //Add the view to the window. final WindowManager.LayoutParams params = new WindowManager.LayoutParams[ WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT]; //Specify the view position params.gravity = Gravity.TOP | Gravity.LEFT; //Initially view will be added to top-left corner params.x = 0; params.y = 100; //Add the view to the window mWindowManager = [WindowManager] getSystemService[WINDOW_SERVICE]; mWindowManager.addView[mFloatingView, params]; //…. //…. } @Override public void onDestroy[] { super.onDestroy[]; if [mFloatingView != null] mWindowManager.removeView[mFloatingView]; } }

Ngoài ra, chúng ta thực hiện OnClickListner [] cho tất cả các nút như chơi, tạm dừng, và ứng dụng mở. Bạn có thể thực hiện một chức năng chơi nhạc tạm dừng trên nút bấm sử dụng MediaPlayer. Khi người dùng nhấp vào nút đóng ở collapsed view, FloatingViewService sẽ bị destroyed và floating view sẽ được loại bỏ khỏi hệ thống phân cấp xem.

Thêm mã dưới đây ở FloatingViewService.java trong phương thức onCrate [].

FloatingViewService.java //The root element of the collapsed view layout final View collapsedView = mFloatingView.findViewById[R.id.collapse_view]; //The root element of the expanded view layout final View expandedView = mFloatingView.findViewById[R.id.expanded_container]; //Set the close button ImageView closeButtonCollapsed = [ImageView] mFloatingView.findViewById[R.id.close_btn]; closeButtonCollapsed.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View view] { //close the service and remove the from from the window stopSelf[]; } }]; //Set the view while floating view is expanded. //Set the play button. ImageView playButton = [ImageView] mFloatingView.findViewById[R.id.play_btn]; playButton.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View v] { Toast.makeText[FloatingViewService.this, "Playing the song.", Toast.LENGTH_LONG].show[]; } }]; //Set the next button. ImageView nextButton = [ImageView] mFloatingView.findViewById[R.id.next_btn]; nextButton.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View v] { Toast.makeText[FloatingViewService.this, "Playing next song.", Toast.LENGTH_LONG].show[]; } }]; //Set the pause button. ImageView prevButton = [ImageView] mFloatingView.findViewById[R.id.prev_btn]; prevButton.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View v] { Toast.makeText[FloatingViewService.this, "Playing previous song.", Toast.LENGTH_LONG].show[]; } }]; //Set the close button ImageView closeButton = [ImageView] mFloatingView.findViewById[R.id.close_button]; closeButton.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View view] { collapsedView.setVisibility[View.VISIBLE]; expandedView.setVisibility[View.GONE]; } }]; //Open the application on thi button click ImageView openButton = [ImageView] mFloatingView.findViewById[R.id.open_button]; openButton.setOnClickListener[new View.OnClickListener[] { @Override public void onClick[View view] { //Open the application click. Intent intent = new Intent[FloatingViewService.this, MainActivity.class]; intent.addFlags[Intent.FLAG_ACTIVITY_NEW_TASK]; startActivity[intent]; //close the service and remove view from the view hierarchy stopSelf[]; } }];

Để kéo thả floating view cùng với việc chạm của người sử dụng, chúng ta phải ghi đè OnTouchListener []. Bất cứ khi nào người dùng chạm vào thư mục gốc của view, chúng ta sẽ ghi lại các tọa độ giá trị khởi tạo x, y, và khi người dùng di chuyển các ngón tay, ứng dụng sẽ tính toán tọa độ X mới và tọa độ Y phối hợp và di chuyển float view.

FloatingViewService.java //Drag and move floating view using user's touch action. mFloatingView.findViewById[R.id.root_container].setOnTouchListener[new View.OnTouchListener[] { private int initialX; private int initialY; private float initialTouchX; private float initialTouchY; @Override public boolean onTouch[View v, MotionEvent event] { switch [event.getAction[]] { case MotionEvent.ACTION_DOWN: //remember the initial position. initialX = params.x; initialY = params.y; //get the touch location initialTouchX = event.getRawX[]; initialTouchY = event.getRawY[]; return true; case MotionEvent.ACTION_MOVE: //Calculate the X and Y coordinates of the view. params.x = initialX + [int] [event.getRawX[] - initialTouchX]; params.y = initialY + [int] [event.getRawY[] - initialTouchY]; //Update the layout with new X & Y coordinate mWindowManager.updateViewLayout[mFloatingView, params]; return true; } return false; } }];

2.2. Xử lý Collapsing và Expanding của Floating Widget

Khi người click vào icon của collapsed layout, việc không hiển thị của collapsed layout sẽ thay đổi thành View.GONE và mở rộng sẽ trở nên nhìn thấy được như dưới đây:

FloatingViewService.java case MotionEvent.ACTION_UP: int Xdiff = [int] [event.getRawX[] - initialTouchX]; int Ydiff = [int] [event.getRawY[] - initialTouchY]; //The check for Xdiff

Chủ Đề