カスタムCheckBox画像が途切れる
上の画像でわかるように。このスクリーンショットには3つのビューがあります。
-最初の項目はCheckBoxで、テキストがあり、状態はオフです。
-2番目の項目はCheckBoxで、テキストはなく、状態はオンです。
-最後の項目はImageViewで、srcは描画可能な画像を指します。
CheckBoxesはAndroid:buttonを使用してカスタマイズされました。
小さい画像を使用してみたところ、すべてのチェックボックスが左揃えになっています。
これら2つの画像を比較すると、CheckBoxのデフォルトのサイズは、テキスト属性が拡張を必要とするほど大きくなるまで、特定のサイズに固定されているように見えます。
ファイルにも特別なものはありません。以下を参照してください。
custom_cb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/creditcard_selected" Android:state_checked="true" />
<item Android:drawable="@drawable/creditcard"/>
</selector>
layout.xml
<?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">
<CheckBox Android:id="@+id/cbFalse"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:button="@drawable/custom_cb"
Android:text="" />
<CheckBox Android:id="@+id/cbTrue"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:button="@drawable/custom_cb"
Android:focusable="false"
Android:checked="true"
Android:layout_toRightOf="@id/cbFalse" />
<ImageView Android:id="@+id/imvTrue"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/creditcard"
Android:layout_toRightOf="@id/cbTrue" />
</RelativeLayout>
とにかく、サイズをwrap_contentに維持しながら、CheckBoxに大きな画像を使用できますか？ CheckBox layout_widthを実際のピクセルまたはdpに設定すると、画像全体が表示されますが、変更するたびに手動でサイズを確認する必要があります。
今日、私は同じ問題を抱えていました（私のカスタム画像が左側でカットされていました）。私はそれを入れて修正しました：
Android:button="@null"
Android:background="@drawable/my_custom_checkbox_state.xml"
使うだけ
Android:button="@null"
Android:background="@null"
Android:drawableLeft="your custom selector"
Android:drawablePadding="as you need"
Android:text="your text"
それでおしまい。
ドローアブルをAndroid:buttonからAndroid:drawableLeftまたはAndroid:drawableRightに変更するだけです。ボタンをnullに設定すると、デフォルトのチェックボックスが表示されなくなります。
私のチェックボックスは次のようになります：
<CheckBox
Android:id="@+id/cb_toggle_switch"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:button="@null"
Android:drawableLeft="@drawable/livescore_btn_check" />
CheckBoxドローアブルは、私にはまったく機能しませんでした。Android:buttonおよびAndroid:backgroundは完全に不安定な結果を出し、それを修正することはできませんでした。
だから私は自分の「カスタムチェックボックス」を書きました。
import Android.annotation.TargetApi;
import Android.content.Context;
import Android.content.res.TypedArray;
import Android.os.Parcel;
import Android.os.Parcelable;
import Android.util.AttributeSet;
import Android.util.TypedValue;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.widget.ImageView;
import Android.widget.LinearLayout;
import org.Apache.commons.lang3.StringUtils;
import butterknife.Bind;
import butterknife.ButterKnife;
import com.example.myapp.R;
/**
* Created by Zhuinden on 2015.12.02..
*/
public class CustomCheckbox
extends LinearLayout
implements View.OnClickListener {
public CustomCheckbox(Context context) {
super(context);
init(null, -1);
}
public CustomCheckbox(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, -1);
}
@TargetApi(11)
public CustomCheckbox(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs, defStyleAttr);
}
@TargetApi(21)
public CustomCheckbox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(attrs, defStyleAttr);
}
private void init(AttributeSet attributeSet, int defStyle) {
TypedArray a = null;
if(defStyle != -1) {
a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CustomCheckbox, defStyle, 0);
} else {
a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CustomCheckbox);
}
defImageRes = a.getResourceId(0, 0);
checkedImageRes = a.getResourceId(1, 0);
checked = a.getBoolean(2, false);
typeface = a.getString(3);
if(StringUtils.isEmpty(typeface)) {
typeface = "Oswald-Book.otf";
}
text = a.getString(4);
inactiveTextcolor = a.getInteger(5, Android.R.color.black);
activeTextcolor = a.getInteger(6, Android.R.color.red);
textsize = a.getDimensionPixelSize(7, 0);
a.recycle();
setOnClickListener(this);
if(!isInEditMode()) {
LayoutInflater.from(getContext()).inflate(R.layout.view_custom_checkbox, this, true);
ButterKnife.bind(this);
imageView.setImageResource(checked ? checkedImageRes : defImageRes);
typefaceTextView.setTypeface(typeface);
if(!StringUtils.isEmpty(text)) {
typefaceTextView.setText(text);
}
if(textsize != 0) {
typefaceTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textsize);
} else {
typefaceTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 12);
}
}
}
boolean checked;
int defImageRes;
int checkedImageRes;
String typeface;
String text;
int inactiveTextcolor;
int activeTextcolor;
int textsize;
OnCheckedChangeListener onCheckedChangeListener;
@Bind(R.id.custom_checkbox_imageview)
ImageView imageView;
@Bind(R.id.custom_checkbox_text)
TypefaceTextView typefaceTextView;
@Override
protected void onFinishInflate() {
super.onFinishInflate();
}
@Override
public void onClick(View v) {
checked = !checked;
imageView.setImageResource(checked ? checkedImageRes : defImageRes);
typefaceTextView.setTextColor(checked ? activeTextcolor : inactiveTextcolor);
onCheckedChangeListener.onCheckedChanged(this, checked);
}
public void setOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
this.onCheckedChangeListener = onCheckedChangeListener;
}
public static interface OnCheckedChangeListener {
void onCheckedChanged(View buttonView, boolean isChecked);
}
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
imageView.setImageResource(checked ? checkedImageRes : defImageRes);
typefaceTextView.setTextColor(checked ? activeTextcolor : inactiveTextcolor);
}
public void setTextColor(int color) {
typefaceTextView.setTextColor(color);
}
@Override
public Parcelable onSaveInstanceState() {
//begin boilerplate code that allows parent classes to save state
Parcelable superState = super.onSaveInstanceState();
SavedState ss = new SavedState(superState);
//end
ss.checked = this.checked;
ss.defImageRes = this.defImageRes;
ss.checkedImageRes = this.checkedImageRes;
ss.typeface = this.typeface;
ss.text = this.text;
ss.inactiveTextcolor = this.inactiveTextcolor;
ss.activeTextcolor = this.activeTextcolor;
ss.textsize = this.textsize;
return ss;
}
@Override
public void onRestoreInstanceState(Parcelable state) {
//begin boilerplate code so parent classes can restore state
if(!(state instanceof SavedState)) {
super.onRestoreInstanceState(state);
return;
}
SavedState ss = (SavedState) state;
super.onRestoreInstanceState(ss.getSuperState());
//end
this.checked = ss.checked;
this.defImageRes = ss.defImageRes;
this.checkedImageRes = ss.checkedImageRes;
this.typeface = ss.typeface;
this.text = ss.text;
this.inactiveTextcolor = ss.inactiveTextcolor;
this.activeTextcolor = ss.activeTextcolor;
this.textsize = ss.textsize;
}
static class SavedState
extends BaseSavedState {
boolean checked;
int defImageRes;
int checkedImageRes;
String typeface;
String text;
int inactiveTextcolor;
int activeTextcolor;
int textsize;
SavedState(Parcelable superState) {
super(superState);
}
private SavedState(Parcel in) {
super(in);
this.checked = in.readByte() > 0;
this.defImageRes = in.readInt();
this.checkedImageRes = in.readInt();
this.typeface = in.readString();
this.text = in.readString();
this.inactiveTextcolor = in.readInt();
this.activeTextcolor = in.readInt();
this.textsize = in.readInt();
}
@Override
public void writeToParcel(Parcel out, int flags) {
super.writeToParcel(out, flags);
out.writeByte(this.checked ? (byte) 0x01 : (byte) 0x00);
out.writeInt(this.defImageRes);
out.writeInt(this.checkedImageRes);
out.writeString(this.typeface);
out.writeString(this.text);
out.writeInt(this.inactiveTextcolor);
out.writeInt(this.activeTextcolor);
out.writeInt(this.textsize);
}
//required field that makes Parcelables from a Parcel
public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
public SavedState createFromParcel(Parcel in) {
return new SavedState(in);
}
public SavedState[] newArray(int size) {
return new SavedState[size];
}
};
}
}
次の使用attrs.xml
<resources
<declare-styleable name="CustomCheckbox">
<attr name="default_img" format="integer"/>
<attr name="checked_img" format="integer"/>
<attr name="checked" format="boolean"/>
<attr name="chx_typeface" format="string"/>
<attr name="text" format="string"/>
<attr name="inactive_textcolor" format="integer"/>
<attr name="active_textcolor" format="integer"/>
<attr name="textsize" format="dimension"/>
</declare-styleable>
</resources>
次のview_custom_checkbox.xml レイアウト：
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:Android="http://schemas.Android.com/apk/res/Android">
<ImageView
Android:id="@+id/custom_checkbox_imageview"
Android:layout_width="@dimen/_15sdp"
Android:layout_height="@dimen/_15sdp"
/>
<com.example.TypefaceTextView
Android:id="@+id/custom_checkbox_text"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"/>
</merge>
そして例：
<com.example.CustomCheckbox
Android:id="@+id/program_info_record_button"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_centerHorizontal="true"
Android:clickable="true"
Android:gravity="center"
app:default_img="@drawable/ic_recording_off"
app:checked_img="@drawable/ic_recording_on"
app:text="@string/record"
app:inactive_textcolor="@color/program_info_buttons_inactive"
app:active_textcolor="@color/active_color"
app:textsize="@dimen/programInfoButtonTextSize"
app:chx_typeface="SomeTypeface.otf"/>
必要に応じて変更します。
RelativeLayoutの代わりに水平方向のLinearlayoutを使用してみてください。また、すべてのレイアウトでウェイトを使用して、ビューに同じ幅を強制的に使用させます。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="horizontal"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<CheckBox Android:id="@+id/cbFalse"
Android:weight="1"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:button="@drawable/custom_cb"
Android:text="" />
<CheckBox Android:id="@+id/cbTrue"
Android:weight="1"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:button="@drawable/custom_cb"
Android:focusable="false"
Android:checked="true"
Android:layout_toRightOf="@id/cbFalse" />
<ImageView Android:id="@+id/imvTrue"
Android:weight="1"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:src="@drawable/creditcard"
Android:layout_toRightOf="@id/cbTrue" />