android自定義View實現流式佈局
阿新 • • 發佈：2018-12-22
//先來一張效果圖
//自定義的控制元件
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MyLiuShiView extends RelativeLayout {
private Context context;
private LinearLayout view_v;
private ArrayList<String> list = new ArrayList<>();
private LinearLayout view_h;
private int position = 0;
private RelativeLayout view_text;
private TextView textView;
private String data;
public MyLiuShiView(Context context) {
super( context );
initView( context );
}
public MyLiuShiView(Context context, AttributeSet attrs) {
super( context, attrs );
initView( context );
}
public MyLiuShiView(Context context, AttributeSet attrs, int defStyleAttr) {
super( context, attrs, defStyleAttr );
initView( context );
}
private void initView(Context context) {
this.context = context;
view_v = (LinearLayout) View.inflate( context, R.layout.liushi_v, null );
addView( view_v );
}
public void setlistData(ArrayList<String> list) {
this.list = list;
setList();
}
private void setList() {
view_v.removeAllViews();
view_h = (LinearLayout) View.inflate( context, R.layout.liushi_h, null );
view_v.addView( view_h );
view_h.removeAllViews();
int len = 0;
for (int i = 0; i < this.list.size(); i++) {
position = i;
data = this.list.get( i );
len += data.length();
Log.i( "tag", "length" + len );
if (len > 10) {
view_h = (LinearLayout) View.inflate( context, R.layout.liushi_h, null );
view_v.addView( view_h );
len = 0;
}
view_text = (RelativeLayout) View.inflate( context, R.layout.liushi_text, null );
textView = view_text.findViewById( R.id.text_name );
textView.setText( data );
view_h.addView( view_text );
//在文字這裡設定樣式 不然的話到最後面如果路文字太長在頁面會發生堆積的問題
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view_text.getLayoutParams();
layoutParams.weight=1;
view_text.setLayoutParams( layoutParams );
}
}
}//在MVP中使用ButterKnife 要在父類的BaseActivity裡面加入一個initViewF方法 方便在presenter層呼叫控制元件
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import soexample.umeng.com.shopcarweekthree.mvp.presenter.BaseActivityPresenter;
public class LiuShiActivity extends BaseActivityPresenter<LiuShiActivityPresenter> {
@Override
public Class<LiuShiActivityPresenter> getClassPresenterActivity() {
return LiuShiActivityPresenter.class;
}
@BindView(R.id.but_sousuo)
Button button;
@BindView(R.id.ed_sousuo)
EditText editText;
@BindView(R.id.myLiushiView)
MyLiuShiView myLiuShiView;
@BindView(R.id.clearlsjl)
TextView textView;
@OnClick({R.id.but_sousuo,R.id.clearlsjl})
public void setClick(View view) {
switch (view.getId()) {
case R.id.but_sousuo:
delegate.ButtonClick();
break;
case R.id.clearlsjl:
delegate.TextViewClick();
break;
}
}
//父類的方法
@Override
public void initView() {
super.initView();
ButterKnife.bind( this );
delegate.initView( button, editText, myLiuShiView );
}
}
//presenter層
import android.content.Context;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import java.util.ArrayList;
import soexample.umeng.com.shopcarweekthree.mvp.view.AppIDelegate;
public class LiuShiActivityPresenter extends AppIDelegate {
private Context context;
private Button button;
private EditText editText;
private MyLiuShiView myLiuShiView;
private ArrayList<String> list = new ArrayList<>();
@Override
protected int getLayoutId() {
return R.layout.activity_liu_shi;
}
@Override
public void getContext(Context context) {
this.context = context;
}
@Override
public void initData() {
}
public void initView(Button button, EditText editText, MyLiuShiView myLiuShiView) {
this.button = button;
this.editText = editText;
this.myLiuShiView = myLiuShiView;
}
public void ButtonClick() {
myLiuShiView.setVisibility( View.VISIBLE );
String trim = editText.getText().toString().trim();
if (TextUtils.isEmpty( trim )) {
//額這裡有個小bug
目前還沒有修正
myLiuShiView.setVisibility( View.GONE );
list.clear();
Toast.makeText( context, "輸入內容不可為空", Toast.LENGTH_SHORT ).show();
} else {
list.add( trim );
myLiuShiView.setlistData( list );
}
}
public void TextViewClick() {
list.clear();
myLiuShiView.setVisibility( View.GONE );
}
}
//佈局的總介面
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".LiuShiActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<EditText
android:id="@+id/ed_sousuo"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:hint="搜你想要的" />
<Button
android:id="@+id/but_sousuo"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="搜尋" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="歷史記錄" />
<TextView
android:id="@+id/clearlsjl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="清空歷史記錄" />
</LinearLayout>
<soexample.umeng.com.shopcarweekthree.MyLiuShiView
android:visibility="gone"
android:id="@+id/myLiushiView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
//橫向滑動的佈局 注意高度改成自適應
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
//縱向滑動的佈局 注意高度改成自適應
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
//文字的佈局
//這裡要涉及到兩點
1.使用相對佈局 不要使用線性佈局 否者在載入之後會很醜
2.注意文字的高度 自適應
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:textSize="20dp"
android:id="@+id/text_name"
android:text="AAA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape" />
</RelativeLayout>
//差點忘記了 shape美觀一下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="#e3e3e3"/>
<stroke android:width="1dp"
android:color="#FFFFFF"/>
</shape>
簡單的流式佈局的實現效果就這樣了