如何使用不同的图像在XML中呈现单个视图实例

时间:2022-09-26 11:01:09

如何使用不同的图像在XML中呈现单个视图实例

My XML:

我的XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="1" >

    <LinearLayout
        android:id="@+id/leftLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:weightSum="1" >

        <LinearLayout
            android:id="@+id/firstProblem"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".5"
            android:weightSum="1" >

            <com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@android:color/black" />

        <LinearLayout
            android:id="@+id/secondProblem"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".5"
            android:weightSum="1" >

             <com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="3dp"
        android:layout_height="fill_parent"
        android:background="@android:color/black" />

    <LinearLayout
        android:id="@+id/rightLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:weightSum="1" >

        <LinearLayout
            android:id="@+id/thirdProblem"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".5"
            android:weightSum="1" >

               <com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@android:color/black" />

        <LinearLayout
            android:id="@+id/fourthProblem"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".5"
            android:weightSum="1" >

              <com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

My View Class :

我的观点类:

public class SpellViewFirst extends View {
    private StartActivity studentActivity;
    private int screenWidth;
    private int screenHeight;
    private Bitmap imageBitmap;
    private ArrayList<Character> charList;
    List<SpellObjects> spellObjectsList;
    private String word;
    int placeHolderHeight;
    private ArrayList<Integer> dragable_id_object_list;
    private Bitmap placeHolderBitmap; 
    Point placeHolderPoints;
    Point alphabetPoints;
    private int indexOfCurrentObject;
    private int offsetX;
    private int offsetY;
    public SpellViewFirst(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        studentActivity = (StartActivity)context;
    }
    @Override
    protected void onSizeChanged(int width, int height, int oldwidth, int oldheight) {
        // TODO Auto-generated method stub
        super.onSizeChanged(width, height, oldwidth, oldheight);
        screenWidth = width;
        screenHeight = height;
        assignCoordinatesToImages();
    }
    private void assignCoordinatesToImages() {
        // TODO Auto-generated method stub
        Bitmap bm=BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/ques.png");
        dragable_id_object_list=new ArrayList<Integer>() ;
        spellObjectsList=new ArrayList<SpellObjects>();
        SpellObjects curentObjects;
        placeHolderHeight=bm.getHeight();
        word=studentActivity.correctWordsArray[0];
        imageBitmap=BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/"+word+".png");
        placeHolderBitmap=Bitmap.createScaledBitmap(bm, screenWidth/word.length(), screenWidth/word.length(),true);
        charList=new ArrayList<Character>();
        placeHolderPoints=new Point();

        for (int i = 0; i < word.length(); i++) {
            charList.add(word.charAt(i));
        }
        for (int i = 0; i < charList.size(); i++) {
            placeHolderPoints.y=screenHeight/2;     
            curentObjects=new SpellObjects(placeHolderPoints, placeHolderBitmap, -1,charList.get(i), null, placeHolderBitmap.getHeight(), screenWidth/word.length(), true);
            placeHolderPoints.x=placeHolderPoints.x+screenWidth/word.length();
            spellObjectsList.add(curentObjects);
        }
        Collections.shuffle(charList);
        alphabetPoints=new Point();
        alphabetPoints.x=imageBitmap.getWidth();
        for (int i = 0; i < charList.size(); i++) {
            Bitmap bitmap= BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/"+charList.get(i)+".png");
            curentObjects=new SpellObjects(alphabetPoints,bitmap, i,charList.get(i), null, placeHolderBitmap.getHeight(), screenWidth/word.length(), true);
            alphabetPoints.x=alphabetPoints.x+bitmap.getWidth();
            spellObjectsList.add(curentObjects);
            dragable_id_object_list.add(i, i);
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvas.drawBitmap(imageBitmap, 0, 0, null);
        for(SpellObjects currentObjects :spellObjectsList ){
            if(currentObjects.getIsCorrectlyPlaced())
                canvas.drawBitmap(currentObjects.getobjectBitmap(), currentObjects.getCurrentPoint().x,currentObjects.getCurrentPoint().y, null);
        }
    }
}

I want to render like cake,duck and good in other three quadrants.Actually this is spelling app for kids where they can drag and drop alphabets to respective positions.Please help me out I am stuck.

我想在其他三个象限中呈现像蛋糕,鸭子和好的东西。实际上这是拼写应用程序的孩子,他们可以拖放字母到各自的位置。请帮助我,我被卡住了。

1 个解决方案

#1


1  

I want to render like cake,duck and good in other three quadrants.

我想在其他三个象限中呈现像蛋糕,鸭子和好蛋糕。

To set different images for your custom View you'll need to add a custom attribute for your custom layout to signal the desired image(or an id, or something to uniquely identify the view). Something like this(in attr.xml):

要为自定义视图设置不同的图像,您需要为自定义布局添加自定义属性,以指示所需的图像(或ID或用于唯一标识视图的内容)。像这样的东西(在attr.xml中):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomAttr">
        <attr name="pictureName" format="string" />
    </declare-styleable>
</resources>

This attribute will be used in the layout like this:

此属性将在布局中使用,如下所示:

<com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                newtag:pictureName="one_of_your_picture_names_here"/>

Don't forget to set the newtag namespace in the root of your xml layout:

不要忘记在xml布局的根目录中设置newtag名称空间:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:newtag="http://schemas.android.com/apk/res/your.package.here"
// ...

Then you'll use that attribute to make the SpellViewFirst use the targeted image:

然后,您将使用该属性使SpellViewFirst使用目标图像:

public SpellViewFirst(Context context, AttributeSet attrs) {
        super(context, attrs);     
        studentActivity = (StartActivity)context;
        if (attrs != null) {
                TypedArray ta = context.obtainStyledAttributes(attrs,
                        R.styleable.CustomAttr, 0, 0);
                word = ta.getString();// this is what you use to get the picture name, right?
                ta.recycle();
        }
}

Then you could use the word variable to get the desired Bitmap in assignCoordinatesToImages(). Don't forget to test word for null(meaning a picture name wasn't set in the layout) and show a default image instead.

然后,您可以使用单词变量在assignCoordinatesToImages()中获取所需的位图。不要忘记测试单词为null(意味着图片名称未在布局中设置)并显示默认图像。

#1


1  

I want to render like cake,duck and good in other three quadrants.

我想在其他三个象限中呈现像蛋糕,鸭子和好蛋糕。

To set different images for your custom View you'll need to add a custom attribute for your custom layout to signal the desired image(or an id, or something to uniquely identify the view). Something like this(in attr.xml):

要为自定义视图设置不同的图像,您需要为自定义布局添加自定义属性,以指示所需的图像(或ID或用于唯一标识视图的内容)。像这样的东西(在attr.xml中):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomAttr">
        <attr name="pictureName" format="string" />
    </declare-styleable>
</resources>

This attribute will be used in the layout like this:

此属性将在布局中使用,如下所示:

<com.student.spelling.SpellViewFirst
                android:layout_width="match_parent"
                android:layout_height="match_parent" 
                newtag:pictureName="one_of_your_picture_names_here"/>

Don't forget to set the newtag namespace in the root of your xml layout:

不要忘记在xml布局的根目录中设置newtag名称空间:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:newtag="http://schemas.android.com/apk/res/your.package.here"
// ...

Then you'll use that attribute to make the SpellViewFirst use the targeted image:

然后,您将使用该属性使SpellViewFirst使用目标图像:

public SpellViewFirst(Context context, AttributeSet attrs) {
        super(context, attrs);     
        studentActivity = (StartActivity)context;
        if (attrs != null) {
                TypedArray ta = context.obtainStyledAttributes(attrs,
                        R.styleable.CustomAttr, 0, 0);
                word = ta.getString();// this is what you use to get the picture name, right?
                ta.recycle();
        }
}

Then you could use the word variable to get the desired Bitmap in assignCoordinatesToImages(). Don't forget to test word for null(meaning a picture name wasn't set in the layout) and show a default image instead.

然后,您可以使用单词变量在assignCoordinatesToImages()中获取所需的位图。不要忘记测试单词为null(意味着图片名称未在布局中设置)并显示默认图像。