U NIVERSIDAD AUTÓNOMA DE Q UERÉTARO

FACULTAD DE I NGENIERÍA

I NGENIERÍA EN AUTOMATIZACIÓN

Programación de Dispositivos Moviles

Método Paint y Canvas para realizar animaciones gráficas.

Practica 7

Profesor:
Dr. Ramos Arreguín Juan Manuel

Alumno:
Cervantes Ortiz José Eduardo 283343

22 de Septiembre de 2022
1. Descripción de la GUI
La a GUI esta compuesta por tres fragmentos, en la figura 1 y 2 se muestra el primer fragmento
que contiene un objeto de tipo ImageView en el cual se muestran las transiciones. Mediante dos
objetos de tipo Button se controla que transicion es la que se etara mostrando en la pantalla.

(a) Imagen Inicial (b) Transisicon (c) Imagen Final

Figura 1:

1
 (a) Transisicon 2 (b) Imagen Final 2

Figura 2:

En la figura 3 y 4 se muestra los dibujos que se estaran mostrando en el segundo fragmento. En

este fragmento se vuelve a dibujar cada imagen despues de que se recibe un dato desde el tercer
fragmento donde se encuentra tres objetos de tipo Button y un objeto de tipo SeekBar. Cuando
se muestra el primer dibujo se puede cambiar el valor del radio de los circulos mediante el dato
recibido apartir de los metodos utilizados por la SeekBar.

2
 (a) (b)

Figura 3: Modificacion del Radio

(a) (b)

Figura 4: Otros dibujos

3
2. Codigo
2.1 activity_main.xml
<?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=".MainActivity" >

<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:name="com.example.manejograficos.Fragment1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.85" />

<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView2"
android:name="com.example.manejograficos.Fragment2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />

<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView3"
android:name="com.example.manejograficos.Fragment3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.3" />
</LinearLayout>

2.2 MainActivity.java
package com.example.manejograficos;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {

4
 super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

2.3 fragment_1.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment1">

<!-- TODO: Update blank fragment layout -->

<ImageView
android:id="@+id/imgV"
android:layout_width="152dp"
android:layout_height="150dp"
android:src="@drawable/transicion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07" />

<Button
android:id="@+id/btnForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickForward"
android:text="Transicion 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.099"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.803" />

<Button
android:id="@+id/btnReverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickReverse"
android:text="Transicion 2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.881"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.803" />

</androidx.constraintlayout.widget.ConstraintLayout>

5
2.4 Fragment1.java
package com.example.manejograficos;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

public class Fragment1 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_1, container, false);

@Override
public void onStart(){
super.onStart();

Button btnForward = (Button) getActivity().findViewById(R.id.btnForward);

btnForward.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
Bundle bundle = new Bundle();
bundle.putString("ivT", "forward");
getParentFragmentManager().setFragmentResult("requestKey", bundle);
ImageView imgV = (ImageView) getActivity().findViewById(R.id.imgV);
imgV.setImageResource(R.drawable.transicion);
TransitionDrawable td = (TransitionDrawable) imgV.getDrawable();
td.startTransition(2000);
}
});

Button btnReverse = (Button) getActivity().findViewById(R.id.btnReverse);

btnReverse.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bundle bundle = new Bundle();
bundle.putString("ivT", "forward");
getParentFragmentManager().setFragmentResult("requestKey", bundle);
ImageView imgV = (ImageView) getActivity().findViewById(R.id.imgV);

6
 imgV.setImageResource(R.drawable.transicion2);
TransitionDrawable td = (TransitionDrawable) imgV.getDrawable();
td.startTransition(2000);
}
});
}

2.5 fragment_2.xml
<?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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".Fragment2">

<ImageView
android:id="@+id/drawLineImageView"
android:layout_width="match_parent"
android:layout_height="706dp"
android:background="#FFFFFFFF" />

</LinearLayout>

2.6 Fragment2.java
package com.example.manejograficos;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentResultListener;

import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.Toast;

public class Fragment2 extends Fragment {

7
int result, radio;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater,container,savedInstanceState);
return (new DrawFragmento(this.getActivity()));
}

public void onStart() {

super.onStart();
getParentFragmentManager().setFragmentResultListener("keyDraw", this, new FragmentResultListener() {
@Override
public void onFragmentResult(@NonNull String requestKey, @NonNull Bundle bundle) {
result = bundle.getInt("dibujo");
radio = bundle.getInt("radio");
DrawFragmento a = new DrawFragmento(getActivity());
a.dibujo();
}
});
}

public class DrawFragmento extends View {

private int numDibujo;

public DrawFragmento(Context context) {super(context);}

public void dibujo(){}

@Override
public void onDraw(Canvas canvas) {
invalidate();
Path path = new Path();
Paint pincel1 = new Paint();
Paint pincel2 = new Paint();
Paint pincel3 = new Paint();
Paint pincel4 = new Paint();
pincel1.setColor(Color.BLUE);
pincel2.setColor(Color.argb(127, 255, 0, 0));
pincel3.setColor(Color.argb(100, 0, 255, 0));
pincel3.setStyle(Paint.Style.FILL); //Estilo de la línea
pincel1.setStrokeWidth(8);
pincel1.setStyle(Paint.Style.STROKE);

pincel4.setStrokeWidth(1);
pincel4.setStyle(Paint.Style.FILL);
pincel4.setTextSize(20);
pincel4.setTypeface(Typeface.SANS_SERIF);

if(result == 0) {
canvas.drawCircle(200, 200, radio, pincel1);
canvas.drawCircle(250, 250, radio, pincel2);
canvas.drawCircle(300, 300, radio, pincel3);
}

if (result == 1){
path.addCircle(200,200,100, Path.Direction.CW);
canvas.drawColor(Color.WHITE);

8
 canvas.drawPath(path, pincel1);
canvas.drawTextOnPath("Programación de Dispositivos Móviles", path, -10, -40, pincel4);
}

if (result == 2){
path.moveTo(50,100);
path.cubicTo(60,70,150,90,200,110);
path.lineTo(340,240);
canvas.drawPath(path, pincel1);
canvas.drawTextOnPath("Programación de Dispositivos Móviles", path, 0, -5, pincel4);
}
}
}

2.7 fragment_3.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".Fragment3">

<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Dibujo 1" />

<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Dibujo 2" />

<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Dibujo 3" />

</TableRow>

<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp" />

9
 <TextView
android:id="@+id/txtRadio"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:text="Radio: 0" />

</FrameLayout>

2.8 Fragment3.java
package com.example.manejograficos;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;

public class Fragment3 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_3, container, false);
}

public void onStart() {

super.onStart();

TextView txtRadio = getActivity().findViewById(R.id.txtRadio);

SeekBar seekBar = getActivity().findViewById(R.id.seekBar);

Button btn1 = getActivity().findViewById(R.id.btn1);

Button btn2 = getActivity().findViewById(R.id.btn2);
Button btn3 = getActivity().findViewById(R.id.btn3);

btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bundle bundle = new Bundle();
bundle.putInt("dibujo", 0);
getParentFragmentManager().setFragmentResult("keyDraw", bundle);
}
});

btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bundle bundle = new Bundle();
bundle.putInt("dibujo", 1);

10
 getParentFragmentManager().setFragmentResult("keyDraw", bundle);
}
});

btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bundle bundle = new Bundle();
bundle.putInt("dibujo", 2);
getParentFragmentManager().setFragmentResult("keyDraw", bundle);
}
});

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
txtRadio.setText("Radio: " + Integer.toString(progress));
Bundle bundle = new Bundle();
bundle.putInt("radio", progress);
getParentFragmentManager().setFragmentResult("keyDraw",bundle);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}

11