编程知识 cdmana.com

Android custom view Tour (1) several ways to customize view

Usually , Customize View There are three big distinctions , Encountered in the daily development of custom View When you need it , It's better to think about which way to go , It's always good to walk faster and relax .

1 ordinary “ Customize ”

Demand always comes when you don't know it , Maybe the native control is a little ugly , Maybe it's the layouts that are more reusable ,Leader Let's change , Write a custom View Solve it , Reduce duplication of development work , It's time for us to face the difficulties , You have to build wheels when you need to .

Now , Take a look at the needs , It turned out to be this TextView It's too monotonous , It's just a simple background 、 Front view and so on , Products and UI Let's change something cool , The words have to be written up and down ( On Next ). have to , Customize View Well , The feeling is relative to the original TextView There is only one difference , Adjust the position in the rendering process , That's easy , Write a UpDownTextView, Inherit TextView, change onDraw() Method .

The first requirement is solved , Look at the next requirement , We have a layout that seems to be used more often in our project , It's used in several places , The key is the same logic , It's just include Layout files still need to write a lot of repetitive code , You have to pull it away . Customize View Well , Look at the layout files that have been extracted , This layout is a RelativeLayout, It contains the controls we need , Write a BtRelativeLayout Inherit RelativeLayout, Then put the root layout of the layout file RelativeLayout Change to BtRelativeLayout, Then write the original logic in BtRelativeLayout In class , Get it done .

ordinary “ Customize ” That's it , Inherited the ready-made control , On this basis, we can complete the additional function style or change the original function style , Can quickly achieve the desired effect , The disadvantage is that it is restricted by the parent class 、 Unable to fulfill complex requirements .

2 Rewrite a View

The need for evil has come again , Copy the guy ! A meal operation as fierce as a tiger , When you look at the needs, you're stuck in your heart . Come on , It's going to really start over and write a View 了 .

Take a closer look at the requirements first , A sound wave control , Continuous animation effect , The simple implementation above is impossible , The desired effects are as follows :
 Insert picture description here
It's time to create a new class VoiceLineView, Inherited from View, Let's sort out the general idea :

  1. Maybe we need to rewrite onMeasure() Method , Calculation VoiceLineView The width and height of .
    According to the parent layout MeasureSpec, Calculate your own width and height and save it .
  2. Maybe we need to rewrite onDraw() Method , Yes VoiceLineView To control the drawing of .
    Cycle drawing , According to the width and height 、 The position of each point draws the desired waveform .
  3. We may need to provide some custom properties , Convenient upper customization VoiceLineView.
    Provide patterns 、 Color 、 Set the maximum value and other attributes .

If you have interested friends, you can write it , The specific implementation I will put in the next article , The article link will be updated when I finish my next article .

3 Rewrite a ViewGroup

VoiceLineView Go online smoothly , It's time to relax , Take out my new comb , Take care of a few hair . Very bald , A big hand touched my shoulder ... A tremolo , A precious hair starts a walk away journey (T^T). Product uncle has come again !!!

After countless times of pressing down the idea of drawing a knife and cutting , Let's look at the needs this time , very good , The task of reconstructing the picture's nine squares , Adjust the layout of the pictures according to the number of pictures ( imitation Facebook ), Let the page not be so rigid , It's a Chicken ribs Good idea .

Let's take a look at the original picture , It's the same as the picture of wechat's circle of friends , Fixed image size , At most, it's a table with three rows and three columns , A simple and efficient , What a wonderful child , What kind of knife ,ε=(´ο`*))) alas .

Come back , To implement the requirements, you need a custom ViewGroup, Call DynamicImageGroup Well , Allied , Let's sort out the general idea :

  1. Maybe we need to rewrite onMeasure() Method , Calculation DynamicImageGroup The width and height of .
    According to the parent layout MeasureSpec, Calculate your own width and height and save it .
  2. Maybe we need to rewrite onLayout() Method , Calculator View The location of .
    according to onMeasure() The width and height calculated and saved in the method 、 Son View The width and height of , Calculator View The location of .
  3. We may need to provide caching mechanisms , Speed up the rendering and reduce the jam .

If you have interested friends, you can write it , The specific implementation I will put in the following article , The link will be updated after I finish writing .

4 review

There are three ways to go , We should choose reasonably , Be the laziest programmer :

  1. Standing on the shoulders of giants . Yes, some of them are just in some View Based on the changes made , Just inherit the View, Replace or add or delete functions as needed , Finish the requirement as fast as possible .
  2. When necessary , The wheel is still to be made . There is no such thing as View The needs of , If it doesn't contain some View Words , The implementation class inherits from View, rewrite onMeasure() Methods and onDraw() Method , Then provide custom properties .
  3. When necessary , Maybe we'll have to build a car . Need to include some View Under the circumstances , If there is no similar ViewGroup If it can be changed , You need to implement classes that inherit from ViewGroup, rewrite onMeasure() Methods and onLayout() Method , If necessary, you can add caching mechanism .

Next article Android Customize View The journey ( Two ) Inherit View Implement customization

版权声明
本文为[coder-ice]所创,转载请带上原文链接,感谢

Scroll to Top