Android Metro-style Launcher development series 1, androidmetro

Android Metro-style Launcher development series 1, androidmetro

It has been more than three years since graduation. I recall that I have never written a blog in the past three years. I always feel busy and have no time to write. I also feel that writing a blog is useless. However, I can see that many of my colleagues are writing blogs and sharing their own things. So I started to write a series of articles for the purpose of following up with Daniel, sharing first, recording second, I will share the detailed process of my project with you for your reference and communication. Now, let's give a comment!

There may be fewer Android set-top boxes or Android TV development projects, which are basically developed based on the source code. You have a git version library, after you have developed and compiled a version, you need to compile the environment to run on the board. google recommends building a development and compilation environment on the Ubuntu system.

I. Build an Android environment in Ubuntu: 1,Install UbuntuSystem:

You can install Ubuntu on Windows by installing a dual system or using Oracle VM VirtualBox. I will not talk about installing the dual-system here. You can check it online. Here is a link for your reference: http://jingyan.baidu.com/article/76a7e409bea83efc3b6e1507.html. To install Ubuntu through Oracle VM VirtualBox in a Windows environment, see: http://jingyan.baidu.com/article/db55b609909c084ba20a2f5e.html

Note:

(1) it must be Windows 7. If it is Windows 8, unexpected things may occur. In short, you can use Windows 7 if you don't want to have trouble.

(2) allocate at least 30 GB of virtual disk space, because you need to download android-sdk to use more than 10 Gb, if you download the source code, you need at least 60 GB space.

(3) After installing the system, you must install the enhanced plug-in. Otherwise, the window cannot be full screen. The installation method is as follows:

Click the position indicated by the red arrow, and enter the user password in the pop-up box to confirm the installation. After the installation is completed, the system will be able to display the screen.

2. Configure the development environment: (1) Configure adb:

Go to the official website to download android-sdk-linux, is: http://dl.google.com/android/ + different versions of the sdk

Example: Download r20

R20 linux: http://dl.google.com/android/android-sdk_r20-linux.tgz

R20 windows Version: http://dl.google.com/android/android-sdk_r20-windows.zip

Mac version of r20: http://dl.google.com/android/android-sdk_r20-macosx.zip

Decompress the downloaded sdk to a directory, for example ~ /Software/directory, terminal execution:

Sudo gedit ~ /. Bashrc

Add the following content at the end:

# Set path for android sdk tools
Export PATH = $ PATH:/home/leo/software/android-sdk-linux/tools
Export PATH = $ PATH:/home/wuhao/software/android-sdk-linux/platform-tools/

(2) configure the java environment:

Go to the Oracle official website and click the link to download the jdk of the corresponding version. I use a 64-bit system, so download:

Jdk-7u75-linux-x64.tar.gz, open the terminal and execute the following command:

Sudo mkdir/usr/lib/jvm/

Cd/usr/lib/jvm/

Cp ~ /Software/jdk-7u75-linux-x64.tar.gz ./

Sudo tar-vxzf jdk-7u75-linux-x64.tar.gz

Configuring environment variables in the user directory. bashrc file is the best option. Add the following in bashrc:

Sudo gedit ~ /. Bashrc

# Set java environment

JAVA_HOME =/usr/lib/jvm/jdk1.7.0 _ 75

Export JRE_HOME =/usr/lib/jvm/jdk1.7.0 _ 75/jre

Export CLASSPATH =.: $ JAVA_HOME/lib: $ JRE_HOME/lib: $ CLASSPATH

Export PATH = $ JAVA_HOME/bin: $ JRE_HOME/bin: $ PATH

The restart takes effect or source. bashrc takes effect.

(3) IDE download and Configuration:

You can choose Eclipse or Android Studio.

Ii. Product Design:

To develop the UI on a TV or set-top box, you must first consider that the TV size is relatively large, and your UI display should be able to look at the appropriate size on the TV screen, so that the display is concise and comfortable, don't look at small icons like native Launcher. The second one is to facilitate remote control operations. The focus navigation is correctly displayed, because you cannot give the set-top box an external mouse to imitate the touch operation, which is too inconvenient. So everyone will think of a style similar to Windows 8. The design is like the figure below:

 

Product requirements:

(1) When the first screen is displayed, a part of the screen is displayed on the right of the screen, and it is scaled down. When page 2 is displayed, page 1 is scaled down on the left, the page is displayed in three parts, switching between pages is smooth, and the icons are zoomed in and out smoothly.

(2) When the focus of each icon is displayed, it must be zoomed in. A shadow or focus box around the icon should be highlighted. when the focus is lost, it should be normally displayed.

(3) The application link corresponding to the icon can be configured in the xml file.

(4) the number of pages can be configured. You can simply modify the parameters to remove a page.

 

Design Concept:

What do you do when you get the above product requirements? I will consider the following:

(1) The first requirement I thought of was ViewPager and viewflipper. The two can achieve smooth page switching.

(2) Each icon is abstracted into a View, which can be zoomed in and out with an attribute animation. The corresponding View xml file can customize attributes to complete application link configuration.

(3) Flexible addition. to delete a page, consider code implementation.

 

Oh, I am so tired. It's just a few hours on a Saturday. It's a meaningful day to use the box in the box diary !".

The above is my first blog post on Launcher Metro style implementation. It briefly describes the environment configuration and design ideas. If you have any shortcomings, please forgive me and exchange ideas, I will explain the code implementation in my next blog. Please pay more attention to it!

 

Get a blog update reminder and share more technical information as soon as possible. Welcome to the personal public platform: coder_online, scan the QR code below or search for coder_online, we can communicate online.