繼承LinearLayout實現大衆點評標題和圖表的效果

原創 彼岸人生 2018-08-29 03:42
一、分析
最近在工作中的工商銀行elife頁面，該需求需要首頁listView列表中的條目的標題和圖表實現以下效果：


該效果類似大衆點評的美食頁面的一個佈局：
                   

二、實現

1.自定義一個PoiListItem繼承LinearLayout
在這個類中實現listView的每一個條目中佈局數據的顯示。實現原理：將標題和圖標嵌套在一個FrameLayout佈局當中，將所有的圖標顯示出來，然後這個類中的方法中，控制圖標的顯示與否。
要想實現以上效果，在這裏設置每一個圖標和標題的padding屬性，設置其右內邊距getPaddingRight()，從而實現上述效果

2.代碼實現
PoiListItem類
package com.icbc.elife.views;
 
import com.icbc.elife.R;
import com.icbc.elife.utils.DisplayUtil;
import com.icbc.elife.utils.ImageLoaderUtil;
 
import android.content.Context;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RatingBar;
import android.widget.TextView;
 
public class PoiListItem extends LinearLayout {
 
	private static int YIDAI_PADDING=0;
	private static int SHANKU_PADDING=0;
	private static int JIFEN_PADDING=0;
	private static int FENQI_PADDING=0;
	private static int ICBCDISCOUNT_PADDING=0;
	private static int GROUP_PADDING=0;
	private static int ICBCCARD_PADDING=0;
	private static int CUXIAO_PADDING=0;
	private static int YUDING_PADDING=0;
	
	private ImageView logo;
	private TextView name;
	private TextView currentPrice;
	private TextView originalPrice;
	private TextView saled;
	
	private TextView shopPrice;
	private TextView smallName;
	private TextView distance;
	private TextView unit;
	private RatingBar ratingbar;
	private LinearLayout homeGuessLikeIconLayout;
	private View bottomView;
	private View yidai,shanku,jifen,fenqi,icbcdiscount,group,icbccard,cuxiao,yuding;
	
	Context context;
	
	/*holder.logo = (ImageView) view.findViewById(R.id.shop_logo);
	holder.name = (TextView) view.findViewById(R.id.shop_name);
	holder.smallName = (TextView) view.findViewById(R.id.small_name);
	holder.distance = (TextView) view.findViewById(R.id.shop_distance);
	holder.unit = (TextView) view.findViewById(R.id.shop_distance_unit);
	holder.shopPrice = (TextView) view.findViewById(R.id.shop_price);
	holder.ratingbar = (RatingBar) view.findViewById(R.id.shop_level);
	holder.bottomView = (View) view.findViewById(R.id.bottom_view);*/
	
	public PoiListItem(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context=context;
	}
 
	public PoiListItem(Context context) {
		super(context);
		this.context=context;
	}
	
	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		
		this.logo=(ImageView) findViewById(R.id.shop_logo);
		this.name=(TextView) findViewById(R.id.shop_name);
		this.smallName = (TextView)findViewById(R.id.small_name);
		this.distance = (TextView)findViewById(R.id.shop_distance);
		this.unit = (TextView)findViewById(R.id.shop_distance_unit);
		this.shopPrice = (TextView)findViewById(R.id.shop_price);
		this.ratingbar = (RatingBar)findViewById(R.id.shop_level);
		this.bottomView = (View)findViewById(R.id.bottom_view);
		
		this.yidai=findViewById(R.id.yidai);
		this.shanku=findViewById(R.id.shanku);
		this.jifen=findViewById(R.id.jifen);
		this.fenqi=findViewById(R.id.fenqi);
		this.icbcdiscount=findViewById(R.id.icbcdiscount);
		this.group=findViewById(R.id.group);
		this.icbccard=findViewById(R.id.icbccard);
		this.cuxiao=findViewById(R.id.cuxiao);
		this.yuding=findViewById(R.id.yuding);
	}
 
	public void setPoiData(String image_url, String storename, String districtName, String sallName, String distance,
			String unit, String averageprice, String ratingbarcount, boolean isYidai, boolean isShanku, boolean isJifen,
			boolean isFenqi, boolean isIcbcdiscount, boolean isGroup, boolean isIcbccard, boolean isCuxiao, boolean isYuding) {
		
		int a=0;
		int b=0;
		int c=0;
		int d=0;
		int e=0;
		int f=0;
		int g=0;
		int h=0;
		int i=0;
		
		if(image_url!=null){
			ImageLoaderUtil.imageLoader(context, image_url,this.logo, ImageLoaderUtil.defaultShopType);
		}
		
		if(!"".equals(storename)&&storename!=null){
			this.name.setText(storename);
		}
		
		this.smallName.setText(districtName +"  "+sallName);
		
		if(!"0.0".equals(distance)&&distance!=null){
			this.distance.setText(distance);
			this.unit.setText(unit);
		}
		
		if(averageprice!=null&&!"0".equals(averageprice)){
			
			this.shopPrice.setText(averageprice+"元/人");
		}
		
		if(ratingbarcount!=null){
			this.ratingbar.setRating(Float.parseFloat(ratingbarcount));
		}
		
		if(isYidai)
		{
			if(YIDAI_PADDING == 0)
			{
				//YIDAI_PADDING = BitmapFactory.decodeResource(getResources(), R.drawable.icon_yidai).getWidth();
				YIDAI_PADDING = DisplayUtil.dip2px(context, 15);
				YIDAI_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a = YIDAI_PADDING;
			this.yidai.setVisibility(View.VISIBLE);
		}
		else
		{
			this.yidai.setVisibility(View.INVISIBLE);
		}
		
		if(isShanku)
		{
			if(SHANKU_PADDING == 0)
			{
				SHANKU_PADDING = DisplayUtil.dip2px(context, 15);
				SHANKU_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += SHANKU_PADDING;
			b += SHANKU_PADDING;
			this.shanku.setVisibility(View.VISIBLE);
		}
		else
		{
			this.shanku.setVisibility(View.INVISIBLE);
		}
		
		if(isJifen)
		{
			if(JIFEN_PADDING == 0)
			{
				JIFEN_PADDING = DisplayUtil.dip2px(context, 15);
				JIFEN_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += JIFEN_PADDING;
			b += JIFEN_PADDING;
			c += JIFEN_PADDING;
			this.jifen.setVisibility(View.VISIBLE);
		}
		else
		{
			this.jifen.setVisibility(View.INVISIBLE);
		}
		
		if(isFenqi)
		{
			if(FENQI_PADDING == 0)
			{
				FENQI_PADDING = DisplayUtil.dip2px(context, 15);
				FENQI_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += FENQI_PADDING;
			b += FENQI_PADDING;
			c += FENQI_PADDING;
			d += FENQI_PADDING;
			this.fenqi.setVisibility(View.VISIBLE);
		}
		else
		{
			this.fenqi.setVisibility(View.INVISIBLE);
		}
		
		if(isIcbcdiscount)
		{
			if(ICBCDISCOUNT_PADDING == 0)
			{
				ICBCDISCOUNT_PADDING = DisplayUtil.dip2px(context, 15);
				ICBCDISCOUNT_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += ICBCDISCOUNT_PADDING;
			b += ICBCDISCOUNT_PADDING;
			c += ICBCDISCOUNT_PADDING;
			d += ICBCDISCOUNT_PADDING;
			e += ICBCDISCOUNT_PADDING;
			this.icbcdiscount.setVisibility(View.VISIBLE);
		}
		else
		{
			this.icbcdiscount.setVisibility(View.INVISIBLE);
		}
		
		if(isGroup)
		{
			if(GROUP_PADDING == 0)
			{
				GROUP_PADDING = DisplayUtil.dip2px(context, 15);
				GROUP_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += GROUP_PADDING;
			b += GROUP_PADDING;
			c += GROUP_PADDING;
			d += GROUP_PADDING;
			e += GROUP_PADDING;
			f += GROUP_PADDING;
			this.group.setVisibility(View.VISIBLE);
		}
		else
		{
			this.group.setVisibility(View.INVISIBLE);
		}
		
		if(isIcbccard)
		{
			if(ICBCCARD_PADDING == 0)
			{
				ICBCCARD_PADDING = DisplayUtil.dip2px(context, 15);
				ICBCCARD_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += ICBCCARD_PADDING;
			b += ICBCCARD_PADDING;
			c += ICBCCARD_PADDING;
			d += ICBCCARD_PADDING;
			e += ICBCCARD_PADDING;
			f += ICBCCARD_PADDING;
			g += ICBCCARD_PADDING;
			this.icbccard.setVisibility(View.VISIBLE);
		}
		else
		{
			this.icbccard.setVisibility(View.INVISIBLE);
		}
		
		if(isCuxiao)
		{
			if(CUXIAO_PADDING == 0)
			{
				CUXIAO_PADDING = DisplayUtil.dip2px(context, 15);
				CUXIAO_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += CUXIAO_PADDING;
			b += CUXIAO_PADDING;
			c += CUXIAO_PADDING;
			d += CUXIAO_PADDING;
			e += CUXIAO_PADDING;
			f += CUXIAO_PADDING;
			g += CUXIAO_PADDING;
			h += CUXIAO_PADDING;
			this.cuxiao.setVisibility(View.VISIBLE);
		}
		else
		{
			this.cuxiao.setVisibility(View.INVISIBLE);
		}
		
		
		if(isYuding)
		{
			if(YUDING_PADDING == 0)
			{
				YUDING_PADDING = DisplayUtil.dip2px(context, 15);
				YUDING_PADDING += (int)(4.0F * getResources().getDisplayMetrics().density);
			}
			a += YUDING_PADDING;
			b += YUDING_PADDING;
			c += YUDING_PADDING;
			d += YUDING_PADDING;
			e += YUDING_PADDING;
			f += YUDING_PADDING;
			g += YUDING_PADDING;
			h += YUDING_PADDING;
			i += YUDING_PADDING;
			this.yuding.setVisibility(View.VISIBLE);
		}
		else
		{
			this.yuding.setVisibility(View.INVISIBLE);
		}
		
		this.yidai.setPadding(this.yidai.getPaddingLeft(), this.yidai.getPaddingTop(), b, this.yidai.getPaddingBottom());
		this.shanku.setPadding(this.shanku.getPaddingLeft(), this.shanku.getPaddingTop(), c, this.shanku.getPaddingBottom());
		this.jifen.setPadding(this.jifen.getPaddingLeft(), this.jifen.getPaddingTop(), d, this.jifen.getPaddingBottom());
		this.fenqi.setPadding(this.fenqi.getPaddingLeft(), this.fenqi.getPaddingTop(), e, this.fenqi.getPaddingBottom());
		this.icbcdiscount.setPadding(this.icbcdiscount.getPaddingLeft(), this.icbcdiscount.getPaddingTop(), f, this.icbcdiscount.getPaddingBottom());
		this.group.setPadding(this.group.getPaddingLeft(), this.group.getPaddingTop(), g, this.group.getPaddingBottom());
		this.icbccard.setPadding(this.icbccard.getPaddingLeft(), this.icbccard.getPaddingTop(), h, this.icbccard.getPaddingBottom());
		this.cuxiao.setPadding(this.cuxiao.getPaddingLeft(), this.cuxiao.getPaddingTop(), i, this.cuxiao.getPaddingBottom());
		this.name.setPadding(this.name.getPaddingLeft(), this.name.getPaddingTop(),a,this.name.getPaddingBottom());
	}
	
	
}


佈局代碼：
<?xml version="1.0" encoding="utf-8"?>
<com.icbc.elife.views.PoiListItem xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:minHeight="?android:listPreferredItemHeight"
    android:orientation="vertical" >
 
    <View
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/home_line" />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal" >
 
        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="75dp" >
 
            <ImageView
                android:id="@+id/shop_logo"
                android:layout_width="100dp"
                android:layout_height="75dp"
                android:scaleType="fitXY" />
        </RelativeLayout>
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="77dp"
            android:layout_marginLeft="10dp"
            android:orientation="vertical" >
 
            <FrameLayout
                android:id="@+id/home_guess_like_icon_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
 
                <TextView
                    android:id="@+id/shop_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:gravity="center"
                    android:layout_marginRight="5dp"
                    android:singleLine="true"
                    android:text=""
                    android:textAppearance="?android:textAppearanceMedium"
                    android:textColor="#333333"
                    android:textSize="16dp" />
 
                <ImageView
                    android:id="@+id/yidai"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_yidai" />
 
                <ImageView
                    android:id="@+id/shanku"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_shan" />
 
                <ImageView
                    android:id="@+id/jifen"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_jifen" />
 
                <ImageView
                    android:id="@+id/fenqi"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_fenqi" />
 
                <ImageView
                    android:id="@+id/icbcdiscount"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_icbc" />
 
                <ImageView
                    android:id="@+id/group"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_tuan" />
 
                <ImageView
                    android:id="@+id/icbccard"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_ka" />
 
                <ImageView
                    android:id="@+id/cuxiao"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_cuxiao" />
 
                <ImageView
                    android:id="@+id/yuding"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_gravity="right|center"
                    android:src="@drawable/icon_yuding" />
 
                <!--
                <LinearLayout
                    android:id="@+id/home_guess_like_icon_layout"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:gravity="right"
                    android:orientation="horizontal"
                    android:visibility="visible" >
                </LinearLayout>
                -->
            </FrameLayout>
 
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="horizontal" >
 
                <RatingBar
                    android:id="@+id/shop_level"
                    style="@style/homeRecommmendRatingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="16dp"
                    android:clickable="false"
                    android:maxHeight="16dp"
                    android:minHeight="10dp"
                    android:numStars="5" />
 
                <TextView
                    android:id="@+id/shop_price"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:gravity="right"
                    android:text=""
                    android:textColor="#333333"
                    android:textSize="14dp" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="horizontal" >
 
                <TextView
                    android:id="@+id/small_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:singleLine="true"
                    android:text=""
                    android:textColor="#999999"
                    android:textSize="@dimen/home_small_size" />
 
                <TextView
                    android:id="@+id/shop_distance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text=""
                    android:textColor="@color/home_text_hint"
                    android:textSize="@dimen/home_small_size" />
 
                <TextView
                    android:id="@+id/shop_distance_unit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text=""
                    android:textColor="@color/home_text_hint"
                    android:textSize="@dimen/home_small_size" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
 
    <View
        android:id="@+id/bottom_view"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#E2E2E2"
        android:visibility="gone" >
    </View>
 
</com.icbc.elife.views.PoiListItem>

getView()方法的實現

public View getView(int position, View view, ViewGroup arg2) {
		if(view==null){
			Log.v("is NULL","DF2"+position);
		}
		Log.v("ListViewLog","DF"+position);
		view = LayoutInflater.from(context).inflate(
					R.layout.home_recommend_shop_item, null);
//		FrameLayout home_guess_like_icon_layout = (FrameLayout) view.findViewById(R.id.home_guess_like_icon_layout);
//		home_guess_like_icon_layout.removeAllViews();
		final GuessYouLike item = getItem(position);
		
		
		if(!"".equals(list.get(position).getService_logos())&&list.get(position).getService_logos()!=null){
			System.out.println("圖標大小爲"+list.get(position).getService_logos().size());
			for(int i = 0 ;i<list.get(position).getService_logos().size() ;i++){
				String str = list.get(position).getService_logos().get(i).getImage_icon();
				if("YIDAI".equals(str)){
					isYidai=true; 
				}
				
				if("SHANKU".equals(str)){
					isShanku=true; 
				}
				
				if("JIFEN".equals(str)){
					isJifen=true; 
				}
				
				if("FENQI".equals(str)){
					isFenqi=true;
				}
				
				if("ICBCDISCOUNT".equals(str)){
					isIcbcdiscount=true;
				}
				
				if("GROUP".equals(str)){
					isGroup=true;
				}
				
				if("ICBCCARD".equals(str)){
					isIcbccard=true;
				}
				
				if("CUXIAO".equals(str)){
					isCuxiao=true;
				}
				
				if("YUDING".equals(str)){
					isYuding=true;
				}
				
				if(i>=6){
					break;
				}
			}
		}
		
		System.out.println("isYidai:"+isYidai+"---isShanku:"+isShanku+"---isJifen:"+isJifen+"---isFenqi:"+isFenqi+"---isIcbcdiscount:"+isIcbcdiscount+"---isGroup:"+isGroup+"---isIcbccard:"+isIcbccard+"---isCuxiao:"+isCuxiao+"---isYuding:"+isYuding);
		
		String districtName = "";
		districtName = (item.getDistrict_name1()==null||"".equals(item.getDistrict_name1()))?"":item.getDistrict_name1();
		districtName += (item.getDistrict_name2()==null||"".equals(item.getDistrict_name2()))?"":"/"+item.getDistrict_name2();
		districtName += (item.getDistrict_name3()==null||"".equals(item.getDistrict_name3()))?"":"/"+item.getDistrict_name3();
		if(districtName.contains("/")&&"/".equals(districtName.substring(0, 1))){
			districtName = districtName.substring(1,districtName.length());
		}
		
		String sallName = "";
		sallName = (item.getSmall_name1()==null||"".equals(item.getSmall_name1()))?"":item.getSmall_name1();
		sallName += (item.getSmall_name2()==null||"".equals(item.getSmall_name2()))?"":"/"+item.getSmall_name2();
		sallName += (item.getSmall_name3()==null||"".equals(item.getSmall_name3()))?"":"/"+item.getSmall_name3();
		if(sallName.contains("/")&&"/".equals(sallName.substring(0, 1))){
			sallName = sallName.substring(1,sallName.length());
		}
		
		String distance="";   //距離
		String unit="";
		distance=item.getDistance();
		unit=item.getUnit();
		
		String averageprice="";  //平均價格
		averageprice=item.getAverage_price();
		
		String ratingbarcount;  //星級個數
		ratingbarcount=item.getLevels();
		String storename="";  //店鋪名稱
		storename=item.getStore_name();
			
		PoiListItem pItem=(PoiListItem) view;
		pItem.setPoiData(item.getImage_url(),storename,districtName,sallName,
				distance,unit,averageprice,ratingbarcount,
				isYidai,isShanku,isJifen,isFenqi,isIcbcdiscount,isGroup,isIcbccard,
				isCuxiao,isYuding);
		
		isYidai=isShanku=isJifen=isFenqi=isIcbcdiscount=isGroup=isIcbccard=isCuxiao=isYuding=false;
		
		return view;
	}

三、擴展
與上述情況不同的是，另外一種情況是圖標靠近右側的邊上顯示，這種效果的實現步驟如下
1.首先要實現這種效果，要將圖標優先顯示出來

2.將標題和圖表嵌套在一個相對佈局裏面，然後設置標題TextView的屬性爲：singleLine="true"，android:ellipsize="end"
設置圖標ImageView的屬性爲：android:layout_alignParentRight="true"

3.然後設置標題TextView相對於ImageView在左邊（toLeftOf）,這樣就能夠實現標題和圖表的這種效果了

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

android跑分組件，刻度盤，圓弧組件

請幾天開發公司項目，有個地方要做一個分數的儀表盤，根據分數跑分，（設計的人估計是看到招商銀行App的賬號總覽） 網上好像找不到類似的組件，那就只能自己開發啦。趁着空餘時間，把組件進行了一些改進，並封裝成依賴庫，分享給大家^_^ 有啥問題，

四处碰壁的小黄 2020-06-16 11:38:41

滑動刪除ListView

滑動刪除ListView 實現原理： A、ListView的ListItem是一個容器，通過Scroller可以使得ListItem的子組件產生滾動。 B、需要通過手指所在的座標來獲取哪一個ListItem要滾動。 C、ListI

it_heros 2020-06-13 02:04:40

自定義組件實現跑馬燈效果

自定義組件實現跑馬燈效果 1：組件類： public class MyView2 extends View { private Mythred mythred; private Paint paint; p

it_heros 2020-06-13 02:04:40

微信小程序引用頁面調用組件內的方法（父組件調用子組件的方法）

近期在做一個項目，小程序普通頁面調用引入組件裏面的方，網上看了很多資料，還是被粗心的自己給整哭了。所以做完項目記錄下： 一、demo結構 1>頁面index 2>自定義組件tx   二、如何定義一個組件 在tx.json中將compone

Syleapn 2020-07-08 07:15:00

別問我[vue]，怎麼自定義組件？

初學vue已近3個周，至此開發技能已滿足。從eggjs 到 vue 再到 scss，這個過程需要總結和分享。深度學習需要從這裏點點滴滴的開始 ~ 以上截圖是，剛爲內容分享使用vue所畫的頁面。看效果，與原圖相比逼真度——真假難分

学术袁 2020-07-05 12:18:41

vue 系列分享：自定義業務組件輸入框

學習的過程，必定是要挑戰一些複雜的頁面和組件的。本來是想着寫一個小demo，以提高自己的編碼水平。誰知看到實現的效果之後，還是覺得有分享的價值的。並且該業務組件，在金融app中使用率應該是極高的。 通過git圖描述以下該自定義業

学术袁 2020-07-05 12:18:41

從0到1繪製蠟燭線（實現細節）

股票？？數字貨幣？？都是浮雲，沒那智商還是好好擼代碼吧，啊哈哈哈！今天作爲一個嫩綠嫩綠的韭菜，就來用技術征服一下割過自己的股票行情圖。 股票行情圖中比較複雜的應該當屬於蠟燭線（陰陽線），這塊手勢處理複雜、圖表指標複雜、交互複雜、數據處理複

彼岸人生 2020-07-05 11:23:20

ListView ViewPager ScrollView 修改邊界色

如果覺得android中默認的listview 滑動到上面或者底部的陰影色不好看，可以這麼定義 先看效果圖 public class ListView extends android.widget.ListView {

谁来自江湖 2020-07-05 07:09:55

微信小程序自定義組件---音頻組件

最近客戶要求，在原有的音頻功能上改動，使用戶能夠拖動進度條進行控制音頻進度。 效果如下： 下面是代碼： 父組件，wxml： <slider-audio audio-src="{{audioUrl}}"></slider-audio>

专业前端小白 2020-06-26 06:35:22

微信小程序自定義組件-自定義底部菜單欄(tabbar)

在做小程序開發的時候，客戶給出一個底部菜單欄的效果圖，要求中間的一個菜單呈圓形突出，也就是下面的效果： 小程序的原生的tabbar是不行了，我就自己寫了一個tabbar的組件。 前言： 目前還存在一些問題待完善，例如跳轉未加載過的頁面時

专业前端小白 2020-06-26 06:35:21

微信小程序自定義組件開發---分頁組件

剛開始搞小程序，搞了一週後，可以開始寫組件了，寫個分頁組件練練手： 父組件，json文件引入： "usingComponents": { "paging": "../../components/paging/index" //引

专业前端小白 2020-06-26 06:35:21

微信小程序自定義組件---標籤導航欄

閒着無聊，寫一個標籤式的導航欄，沒有使用微信小程序的scroll-view，感覺這玩意兒有點詭異，添加了scroll-x=“true”,也加了樣式父元素white-space:nowrap;子元素：display:inline-block

专业前端小白 2020-06-26 06:35:21

[微信小程序]以自頁面底部菜單爲例自定義組件

目錄基礎思考動手自定義頁面結構渲染頁面樣式綁定事件轉爲組件創建組件所需的目錄及頁面複製組件內容聲明組件js轉換使用引入組件使用組件 基礎 參考： 小程序開發文檔-自定義組件 小程序開發文檔-Component 構造器 在不考慮第三

master336 2020-06-21 16:54:49

小程序自定義button組件獲取用戶信息（用戶授權登錄）

背景 不得不提一句：微信小程序的：獲取用戶信息的機制改了（早就改了）。或許是不想讓開發者對用戶“隨意”造成困擾——畢竟有的用戶上來只是爲了“逛一圈”。於是增加了“只有觸發button才能彈窗”的功能。 新版-微信授權機制 <but

云小梦 2020-06-20 18:28:50

Android 自定義數字虛擬鍵盤

大概兩年沒寫文章了，有些生疏，不知如何動筆，很早以前有過轉行的想法，想過考公務員，所以重心不在程序上。近期通過內推的形式入職了一家大公司（社保公積金繳全額，雙休，帶薪十三天年假，少加班），這麼好的福利加上這幾年的顛沛流離讓我有了穩

it_heros 2020-06-13 02:04:40