快速简单的定制一个时间轴布局(LinearLayout)

github:

https://github.com/razerdp/UnderLineLinearLayout

ÏÈÉÏͼ£º

underlinelayout.gif

ºÜ¶àÇé¿öÏ£¬ÎÒÃǶ¼»áÓöµ½ÐèÒªÀàËÆÓÚʱ¼äÖáµÄÒ»¸ö²¼¾Ö£¬ÍøÉÏÒ²Óкܶ࣬µ«ÊǺܶàÇé¿öÏÂÎÒÃÇÆäʵ²¢²»ÐèÒªÄÇô¶à¿â£¬±Ï¾¹64kÏÞÖƾÍÔÚÄÇ£¬²»¹ÜÎÒÃÇÓû¹ÊDz»Óã¬ËüÒÀÈ»ÔÚÄÇ¡£¡£¡£

¶øÇÒ¸ü¶àʱºò£¬ÎÒÃǵÄʱ¼äÖáÒ²Ðí²¢²»ÐèÒªÄÇô¶àÊý¾Ý£¨±ÈÈçתÕËÁ÷³Ì£¿£©

ÊÂʵÉÏÕâ´ÎµÄ½Ì³ÌÒ²ÊÇÒòΪÎÒ˾ÐèҪŪһ¸öתÕËÁ÷³Ì£¬Õâ¸öתÕËÁ÷³Ì°üº¬ÁË»ù±¾µÄÈý¸ö״̬£º

1 - תÕË¿ªÊ¼

2 - תÕËÖÐ

3 - תÕ˳ɹ¦

¶øʧ°ÜºóÖØÐÂתÕË¿ÉÒÔ¿´µ½Ç°ÃæµÄ״̬£¬Ò²¾ÍÊÇÇ°ÃæµÄÈý¸ö״̬µÄÖظ´

Ò»°ã¶øÑÔ£¬×ªÕË3~4´Îʧ°ÜÎÒÃÇÒ²¾ÍËãÁË£¬Í¬Ê±ÒòΪ²¼¾Ö±È½Ï¼òµ¥£¬ËùÒÔÎÒÕâ´Î¾Íû´òËãÓÃlistview£¬¶øÊǼòµ¥µÄ¼Ì³ÐLinearLayout

µ±È»£¬Èç¹ûÊý¾Ý±È½Ï¶à£¬ÎªÁËÄڴ潨Ò黹ÊÇÓÃlistviewºÃ

ÄÇôÏÂÃæÕýÎÄ¿ªÊ¼£º

 Ê×Ïȹ滮һÏÂÎÒÃÇÐèÒªµÄÔªËØ£¬´ÓͼÖÐÎÒÃÇ¿ÉÒÔ¿´µ½µÄÔªËØÓУº

      Ïߣ¨ÑÕÉ«£¬¿í£©£¬µã£¨´óС£¬ÑÕÉ«£©£¬Í¼±ê

 ÎªÁË·½±ãµ÷Õû£¬ÎÒÃÇ»¹ÐèÒªÒýÈëÁ½¸öÖµ

      µã¾àÀ븸¿Ø¼þ×ó±ßµÄÆ«ÒÆÖµ£¨µ÷Õû×óÓÒ¼ä¾à£©£¬Ã¿¸ö½Úµã¾àÀëchildViewµÄÆ«ÒÆÖµ£¨µ÷ÕûÉÏϼä¾à£©

ÓÚÊÇÎÒÃǵÄattrs.xml¾Í³öÀ´ÁË

1.png

È»ºó¼Ì³ÐLinearLayout£¬¿ªÊ¼ÎÒÃǵļòÒ×ʱ¼äÖá

2.png

¹¹ÔìÆ÷ÎÒÃÇ»ñÈ¡¸÷ÖÖ²ÎÊý£¬ÖÁÓÚ±äÁ¿¾Í²»½âÊÍÁË

ÎÒÃǵÄÖ÷Òª·½·¨¶¼ÔÚonDrawÀïÃ棬onDrawÎÒÃÇÖ´ÐÐÒ»¸ö·½·¨

4.png

¶øÎÒÃǵÄdrawTimeLineµÄ·½·¨ÈçÏ£º

3.png

°´ÕÕÎÒµÄÉèÏ룬ÊÇÏëןá×ÅÒ²×öÒ»¸öµÄ£¬µ«ÓÉÓÚʱ¼äÔ­Òò£¬¾ÍÔÝʱδÄÜʵÏÖ£¬µ«ÆäʵʵÏÖÔ­Àí¶¼ÊÇÒ»ÑùµÄ¡£

½ÓÏÂÀ´¾ÍÊÇ×îÖ÷ÒªµÄ¼¸¸ö·½·¨ÁË£º

5.png

6.png

7.png

ÕâÀï˵˵˼·£º

  Ê×ÏÈÎÒÃÇÔÚondrawÀïÃæ»ñÈ¡×ӿؼþµÄÊýÁ¿£¬È»ºóͨ¹ý×ӿؼþµÄÊôÐÔ¶¨Î»ÎÒÃǵÄʱ¼äÖá

  µÚÒ»²½ÎÒÃÇÏÈÈ·¶¨µÚÒ»¸ö×ӿؼþµÄλÖã¬ÕâÀïÒòΪ´¹Ö±µÄʱ¼äÖᣬËùÒÔÎÒÃÇͨ¹ýtop+paddingTopÀ´È·¶¨ÎÒÃǵĽáµãYλÖã¬Í¬Ê±ÒýÓÃÎÒÃÇxml¶¨ÒåºÃµÄdynamicÖµÀ´Î¢µ÷¡£Í¬Ê±¼Ç¼Ï´ËʱµÚÒ»¸ö½áµãµÄx,y

  µÚ¶þ²½ÎÒÃÇÈ·¶¨×îºóÒ»¸ö¿Ø¼þµÄλÖ㬷½·¨Í¬µÚÒ»²½£¬Ò²¼Ç¼Ï´Ëʱ×îºóÒ»¸ö½ÚµãµÄx,y¡£Í¬Ê±µ÷ÓÃdrawBitmap»­³öÎÒÃǵÄicon

  µÚÈý²½ÎÒÃǾͻ­µÚÒ»¸öºÍ×îºóÒ»¸öÖ®¼äµÄ×ӿؼþµÄÏߺͽáµã¡£Ïà¹Ø×¢ÊͶ¼ÔÚ´úÂëÖбê×¢ºÃÁË£¬ËùÒÔÕâÀï¾Í²»ÔÙÏêϸ²ûÊöÁË

Õâ¸ö¹¤³Ì»¹Ã»Íê³É£¬ÒÔºóÈç¹ûÓÐʱ¼äÎÒÏ£ÍûÄÜ°Ñˮƽ·½ÏòµÄҲŪ³öÀ´¡£µ±È»£¬Èç¹ûÖîλÓиüniceµÄÐÞÕý»¶Ó­PullRequest.

ÕâÊÇÒ»¸ö¼òµ¥µÄʱ¼äÖᶨÖÆ£¬Ï£ÍûÄܹ»°ïµ½Äã-V-£¨Ïêϸ´úÂëÇë¿´github£©