New UI-FrameLayout (frame layout) details, ui-framelayout

New UI-FrameLayout (frame layout) details, ui-framelayout

New UI-FrameLayout (frame layout)

-- Reprinted please indicate the source: coder-pig. You are welcome to repost it. Please do not use it for commercial purposes!

The piggy Android development and exchange group has been established. You are welcome to join us. You can be a newbie, cainiao, or a great god.

After all, the power is limited. There will certainly be a lot of flaws in writing. You are welcome to point out, brainstorm, And let pig's blog post.

For more details, help more people, O (∩ _ ∩) O thank you!

Piggy Android Development Exchange Group:Piggy Android Development GroupGroup Number:421858269

New Android UI instance catalog:Http://blog.csdn.net/coder_pig/article/details/42145907

This section introduces:

FrameLayout (frame layout) is the simplest layout in the six la s, which is directly opened on the screen.

When we add controls to a blank area, they are placed in the upper left corner of the area by default.

There is no positioning method, so there are not many application scenarios. The size of the frame layout is determined by the largest sub-control in the control.

If the size is the same as the size, you can only see the top component at the same time! The control that will be added later will overwrite the previous one!

Although the control is placed in the upper left corner by default, we can also specify other locations through the layout_gravity attribute!

In addition to presenting the simplest example, this section also provides two interesting examples. If you are interested, please take a look!

Body:

Common attributes:

FrameLayout has very few attributes, but before we talk about it, we should first introduce one thing:

Foreground image:Always at the top of the frame layout, directly facing the user's image, is not overwritten Image

Two attributes:

Android: foreground: sets the foreground image of the modified frame layout container.

Android: foregroundGravity: Set the foreground image display position

Example: 1) The simplest demo:

:

The Code is as follows:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/FrameLayout1"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context=".MainActivity"       android:foreground="@drawable/logo"      android:foregroundGravity="right|bottom">        <TextView          android:layout_width="200dp"          android:layout_height="200dp"          android:background="#FF6143" />      <TextView          android:layout_width="150dp"          android:layout_height="150dp"          android:background="#7BFE00" />       <TextView          android:layout_width="100dp"          android:layout_height="100dp"          android:background="#FFFF00" />        </FrameLayout>  

Code explanation:

It is easy to set different sizes and background colors for the three textviews, overwrite them one by one, and then the foreground image in the lower right corner.

Android: foreground = "@ drawable/logo" sets foreground Image

Android: foregroundGravity = "right | bottom" sets the foreground image position in the lower right corner.

2) Cute girl moving with her fingers:

:

Implementation process:

Step 1: first set the main. xml layout to a blank FrameLayout and set an image background for it.Step 2: Create a MeziView custom component class that inherits the View class, initialize the initial coordinates of the view in the constructor step 3: override the onDraw () method, instantiate an empty paint brush class Paintstep 4: Call BitmapFactory. decodeResource () to generate bitmap object step 5: Call canvas. drawBitmap () is used to draw a girl's bitmap object. step 6: Determine whether to recycle the image. Otherwise, forcibly recycle the image. step 7: Obtain the frame layout object in the main Java code, and instantiate a MeziView class step 8: add a touch event listener to the instantiated mezi object, rewrite the onTouch method, change the X and Y coordinates of mezi, and call invalidate () redraw method step 9: add the mezi object to the frame Layout

The implementation code is as follows:

Layout code: main_activity.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/mylayout"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context=".MainActivity"      android:background="@drawable/back" >    </FrameLayout>  

Custom MeziView. java:

Package com. jay. example. framelayoutdemo2; import android. content. context; import android. graphics. bitmap; import android. graphics. bitmapFactory; import android. graphics. canvas; import android. graphics. paint; import android. view. view; public class MeziView extends View {// defines the relevant variables, which are the X and Y coordinates of the sister's position in sequence: public float bitmapX; public float bitmapY; public MeziView (Context context) {super (context); // set the sister's starting coordinate bitmapX = 0; bitmapY = 200;} // rewrite the onDraw () method of the View class @ Overrideprotected void onDraw (Canvas canvas Canvas) {super. onDraw (canvas); // create and instantiate the Paint object. The Paint paint = new Paint (); // Bitmap object bitmap = BitmapFactory is generated based on the image. decodeResource (this. getResources (), R. drawable. s_jump); // draw the canvas of the cute girl. drawBitmap (bitmap, bitmapX, bitmapY, paint); // determines whether the image is recycled. if the wood is recycled, the image is forcibly withdrawn if (bitmap. isRecycled () {bitmap. recycle ();}}}

MainActivity. java:

Package com. jay. example. framelayoutdemo2; import android. OS. bundle; import android. view. motionEvent; import android. view. view; import android. view. view. onTouchListener; import android. widget. frameLayout; import android. app. activity; public class MainActivity extends Activity {@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); FrameLayout frame = (FrameLayout) findViewById (R. id. mylayout); final MeziView mezi = new MeziView (MainActivity. this); // Add the touch event listener mezi for our cute girl. setOnTouchListener (new OnTouchListener () {@ Overridepublic boolean onTouch (View view, MotionEvent event) {// set the mezi position displayed by the sister. bitmapX = event. getX ()-150; mezi. bitmapY = event. getY ()-150; // call the re-painting method mezi. invalidate (); return true ;}}); frame. addView (mezi );}}

Code explanation:

See the steps. It is very easy to define a View class, override the repainting method, and then add a touch time for him in the Activity.

In the touch time, rewrite the onTouch method to obtain the click focus. In addition, you also need-150. Otherwise, the coordinate is the custom View.

In the upper left corner, call the invalidate () method and add it to the layout!

Code download: http://pan.baidu.com/s/1pJJfKgz

3) Running cute girl:

:

Implementation process:

Step 1: Define an empty FrameLayout layout and set the foreground image position to the central position.

Step 2: Get the FrameLayout layout in the Activity, create a new Handler object, override the handlerMessage () method, and call the image update method.

Step 3: Customize a move () method to dynamically set the foreground Image Display bitmap through the switch

Step 4: Create a Timer object Timer In the onCreate () method, override the run method, and send an empty message to handler every 170 milliseconds.

The implementation code is as follows:

Layout file: main_activity.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/myframe"      android:layout_width="wrap_content"      android:layout_height="wrap_content"       android:foregroundGravity="center">    </FrameLayout> 

MainActivity. java:

Package com. jay. example. framelayoutdemo3; import java. util. timer; import java. util. timerTask; import android. OS. bundle; import android. OS. handler; import android. OS. message; import android. view. view; import android. view. view. onClickListener; import android. widget. frameLayout; import android. app. activity; import android. graphics. drawable. drawable; public class MainActivity extends Activity {// initialization variable, frame layout FrameLayout frame = null; // customize a handler Class Object Handler handler = new Handler () {int I = 0; @ Override public void handleMessage (Message msg) used to regularly update the UI Interface) {// determine whether the information is the if (msg. what = 0x123) {I ++; move (I % 8);} super. handleMessage (msg) ;}}; // defines the way to switch the image when walking void move (int I) {Drawable a = getResources (). getDrawable (R. drawable. s_1); Drawable B = getResources (). getDrawable (R. drawable. s_2); Drawable c = getResources (). getDrawable (R. drawable. s_3); Drawable d = getResources (). getDrawable (R. drawable. s_4); Drawable e = getResources (). getDrawable (R. drawable. s_5); Drawable f = getResources (). getDrawable (R. drawable. s_6); Drawable g = getResources (). getDrawable (R. drawable. s_7); Drawable h = getResources (). getDrawable (R. drawable. s_8); // use setForeground to set the foreground image switch (I) {case 0: frame. setForeground (a); break; case 1: frame. setForeground (B); break; case 2: frame. setForeground (c); break; case 3: frame. setForeground (d); break; case 4: frame. setForeground (e); break; case 5: frame. setForeground (f); break; case 6: frame. setForeground (g); break; case 7: frame. setForeground (h); break ;}@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); frame = (FrameLayout) findViewById (R. id. myframe); // defines a Timer object and regularly sends information to handler new Timer (). schedule (new TimerTask () {@ Override public void run () {// send an empty message to notify the system to change the foreground image handler. sendEmptyMessage (0x123) ;}, 0,170 );}}

Code parsing:

The Code is also very simple, that is, defining a handler object to refresh the foreground image of the frame layout and defining a Timer

Send the scheduled message every 170 milliseconds, I ++; move (I % 8); this is because we use 8 images as the animation material!

Code download: http://pan.baidu.com/s/1c0vL8PE

The last two sentences are as follows:

It has been six days since the previous blog post. Because of some family affairs, I have been upset for a while and have been decadent for some time. There are always a variety of things in my life.

Although I don't know my path in the future, I am confused, but I have to stick to some things and cheer for myself!

All right, let's talk about it. The little girl will work hard. In addition, most of FrameLayout's content is based on an old Blog.

Some modifications have also been made above! Hope to bring convenience to everyone. Thank you!